vercel / vercel/next.js

tsconfig > compilerOptions.paths > `${configDir}` template variable fails the app load and build

Open
#70,912 5 comments 9 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug Module Resolution TypeScript
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
  1. Fork the sandbox
  2. Run pnpm install
  3. Run pnpm dev
  4. 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.