Unable to import ts-files outside of project dir

[tx46]

Bug report

Describe the bug

I have three projects; A, B and C. C is the "common" project that is used by both A (next-js) and B (pure ts using tsc). C transpiles fine, as does B.

Importing code from C in project A (next-js) gives syntax errors, as if the .ts-files are not being treated as TypeScript:

Module parse failed: Unexpected token (62:58)

The unexpected token happens to be a colon denoting a type (i.e., varName: ...). It works and imorts fine from B and it's definitely a valid TS source file.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

mkdir bug-repro
cd bug-repro
mkdir b
touch b/tsconfig.json
echo export default function foo(a: number) { return 2 * a; } > b/foo.ts
npx create-next-app
cd my-app
touch tsconfig.json

Add the following just under "import styles ..." in pages/index.js:

import foo from "../../b/foo";
foo(1);

mv pages/index.js pages/index.tsx
npm install --save-dev typescript @types/react @types/node
npm run dev
ctrl-c

Add this to my-app/tsconfig.json:

"references": [{"path":"../b"}]

Add this as b/tsconfig.json:

{
  "compilerOptions": {
    "composite": true,
    "declaration": true,
    "declarationMap": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "module": "commonjs",
    "noImplicitAny": true,
    "outDir": "build",
    "rootDir": "src",
    "skipLibCheck": true,
    "strict": true,
    "target": "es5"
  },
  "references": []
}

npm run dev

Visit localhost:3000

Check error in terminal:

error - ../b/foo.ts 1:29
Module parse failed: Unexpected token (1:29)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> export default function foo(a: number) { return 2 * a; }
|

Expected behavior

The app imports foo.ts and runs fine.

Screenshots

System information

• OS: Windows 10 20H2 19042.685 x64
• Browser:
• Version of Next.js: 10.0.0.3
• Version of Node.js: v12.19.0
• Deployment: npm run dev

Additional context

n/a

[tx46]

So I figured this out. If I add next.config.json it works:

module.exports = {
  webpack: (config) => {
    config.module.rules.push({
      test: /\.tsx?$/,
      use: ["ts-loader"],
    })

    return config
  },
}

I also have to set noEmit to false in tsconfig.json.

Now, something else is happening. Whenever I import mongoose from foo.ts, this happens and next-js just crashes:

Error: ENOENT: no such file or directory, lstat '...\bug-repro\my-app\util'
    at realpathSync (fs.js:1643:7)
    at handleExternals (...\bug-repro\my-app\node_modules\next\dist\build\webpack-config.js:68:53)

This results in a hard crash of next-js. What do I do?

[tx46]

So, as you can see from above, it's actually looking for a file named "util" in the repo root. I don't understand why, but I tried creating it:

touch util && npm run dev

Now it crashes on another file. Let's create all of them:

touch util
touch events
touch assert
touch buffer
touch querystring
touch url

Suddenly it doesn't crash anymore, but now it does this instead:

ready - started server on http://localhost:3000
event - compiled successfully
event - build page: /api/hello
wait  - compiling...
warn  - ../b/node_modules/mongoose/lib/index.js
Critical dependency: the request of a dependency is an expression

../b/node_modules/require_optional/index.js
Critical dependency: the request of a dependency is an expression

../b/node_modules/require_optional/index.js
Critical dependency: the request of a dependency is an expression

../b/node_modules/require_optional/index.js
Critical dependency: the request of a dependency is an expression

../b/node_modules/mongodb/lib/core/auth/mongodb_aws.js
Module not found: Can't resolve 'aws4' in '...\bug-repro\b\node_modules\mongodb\lib\core\auth'

../b/node_modules/mongodb/lib/operations/connect.js
Module not found: Can't resolve 'mongodb-client-encryption' in '...\bug-repro\b\node_modules\mongodb\lib\operations'

../b/node_modules/debug/src/node.js
Module not found: Can't resolve 'supports-color' in '...\bug-repro\b\node_modules\debug\src'

I absolutely have no clue what's going on.

[tx46]

So I found the reason for the crash:

next.js/packages/next/build/webpack-config.ts

Line 659 in a9f1975

realpathSync(baseRes) !== realpathSync(res))

Removing the realpathSync conditions makes everything work as it should. I'm sure there may be other cases where it's needed, though. Maybe one of the next-js devs can chime in on this?

I'm still getting the odd warnings, but it's running as it should, it seems.

[timneutkens]

We've landed an experimental feature for this: #22867

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.