tsconfig > compilerOptions.paths > `${configDir}` template variable fails the app load and build
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 142k
- Forks
- 32.5k
- Avg merge
- 2d 13h
- Merged PRs (30d)
- 334
Description
Link to the code that reproduces this issue
https://codesandbox.io/p/devbox/next-tsconfig-configdir-l7jgmy?file=%2Ftsconfig.json%3A23%2C15
To Reproduce
- Fork the sandbox
- Run
pnpm install - Run
pnpm dev - The app fails to load due to import path alias issue
Current vs. Expected behavior
Current
TypeScript has added the ${configDir} Template Variable for Configuration Files in TypeScript 5.5.
This template variable is essential for creating extendable configs, e.g.:
https://github.com/alexilyaev/configs/blob/main/tsconfig/next.json
But it doesn't work in Next.js when used in tsconfig.json > compilerOptions.paths values.
We can verify that the config works because navigating imports that use the path aliases works as expected.
Also running pnpm tsc --noEmit doesn't fail (pnpm prefix to run the project TypeScript version and not the global one).
Expected
Using ${configDir} Template Variable in tsconfig.json should not fail the Next.js app load and build.
Provide environment information
Operating System:
Platform: linux
Arch: x64
Version: #1 SMP PREEMPT_DYNAMIC Sun Aug 6 20:05:33 UTC 2023
Available memory (MB): 4102
Available CPU cores: 2
Binaries:
Node: 20.9.0
npm: 9.8.1
Yarn: 1.22.19
pnpm: 8.10.2
Relevant Packages:
next: 15.0.0-canary.179 // Latest available version is detected (15.0.0-canary.179).
eslint-config-next: N/A
react: 19.0.0-rc-2d16326d-20240930
react-dom: 19.0.0-rc-2d16326d-20240930
typescript: 5.6.2
Next.js Config:
output: N/A
Which area(s) are affected? (Select all that apply)
Developer Experience, Module Resolution, TypeScript
Which stage(s) are affected? (Select all that apply)
next dev (local), next build (local)
Additional context
I've encountered this issue when I tried to move my tsconfig.json settings to an external repo and use it in my repo via extends in tsconfig.json.
On the TypeScript side, everything worked. But Next.js failed to build.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked CodeSandbox and its tsconfig.json, focusing on compilerOptions.paths and the ${configDir} values. Reproduce the failure with pnpm dev, then check the affected next dev and next build behavior against pnpm tsc --noEmit. Done means path aliases using ${configDir} resolve and the app loads and builds successfully.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nextjs, typescript
- Domain
- build-system, developer-experience
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100