baseUrl in create-next-app causes local files to shadow npm packages in TypeScript #46288
Description
Verify canary release
- I verified that the issue exists in the latest Next.js canary release
Provide environment information
tomb@Thomass-MacBook-Pro-2 abcef % npx --no-install next info
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 21.4.0: Fri Mar 18 00:46:32 PDT 2022; root:xnu-8020.101.4~15/RELEASE_ARM64_T6000
Binaries:
Node: 16.15.1
npm: 8.19.3
Yarn: 1.22.19
pnpm: 6.11.0
Relevant packages:
next: 13.1.7-canary.27
eslint-config-next: 13.1.6
react: 18.2.0
react-dom: 18.2.0
Which area(s) of Next.js are affected? (leave empty if unsure)
TypeScript
Link to the code that reproduces this issue
https://github.com/thomasballinger/next-typescript-module-resolution-repro
To Reproduce
This is a bug with a behavior specific to create-next-app, so the repro is not based on reproduction-template.
To reproduce the issue clone the repo, install dependencies, and open pages/index.tsx in VSCode or run npx tsc in the directory. Notice that TypeScript uses the wrong types for underscore.
Or to repro the issue from scratch, run
$ yarn create next-app --ts --eslint --no-src-dir --no-experimental-app --use-npm --import-alias '@/*' repro
$ cd repro
$ npm install underscore @types/underscore
$ echo 'export const fileInThisRep = true' > underscore.ts
$ echo 'import _ from "underscore";' >> pages/index.tsx
$ echo 'console.log(_.each)' >> pages/index.tsx
$ npx tsc
TypeScript reports that
pages/index.tsx:124:8 - error TS1192: Module '"/Users/tomb/abcef/underscore"' has no default export.
124 import _ from "underscore";
Describe the Bug
TypeScript (but not runtime) module resolution prefers local files to node modules, behavior that differs from runtime. This makes VSCode and npx tsc show errors when a file with the same name as an imported package exists while the package is imported.
Once underscore and @types/underscore have been installed and a underscore.ts file exists at the root of the project, importing
import _ from 'underscore'will show types for ./underscore.ts instead of the npm package underscore.
Expected Behavior
Runtime module resolution and TypeScript module resolution should match. I think the less surprising behavior is to check node_modules first, then local files, at both run time and type time.
Which browser are you using? (if relevant)
No response
How are you deploying your application? (if relevant)
No response