Description
Link to the code that reproduces this issue
https://github.com/michaelschufi/repro-nextjs-monorepo-dev-overlay-path
To Reproduce
- Go to
apps/web
. - Run the dev server
pnpm run dev
- Open the app inside the browser e.g. on http://localhost:3000/
- Observe the error path not being relative to the web app's root.
Current vs. Expected behavior
The path shown in the dev-overlay is relative to the root-level node_modules directory instead of the current working directory where next dev
is run.
This results in the editor link (on the right) not working properly.
Provide environment information
Operating System:
Platform: linux
Arch: x64
Version: #1 SMP Fri Mar 29 23:14:13 UTC 2024
Available memory (MB): 15853
Available CPU cores: 16
Binaries:
Node: 22.11.0
npm: 10.9.0
Yarn: N/A
pnpm: 9.0.0
Relevant Packages:
next: 15.4.0-canary.12 // Latest available version is detected (15.4.0-canary.12).
eslint-config-next: N/A
react: 19.1.0
react-dom: 19.1.0
typescript: 5.8.2
Next.js Config:
output: N/A
Which area(s) are affected? (Select all that apply)
Error Overlay, Turbopack
Which stage(s) are affected? (Select all that apply)
next dev (local)
Additional context
It doesn't matter if the root directory is open in VS Code, or if the project directory is open. Since the path is wrong, VS Code cannot not resolve it either way.
This might be related to #73258 where the path was duplicated.
This might be working with webpack. Although, I cannot be sure, as the error is different if I omit --turbopack
. Probably because the Next.js example I used doesn't support webpack.
Edit:
Path is fine if the issue is not at the import level
When commenting the import out.
// import { foo } from "./not-existing";
but keeping the foo
reference on the onClick
of the button, there's a reference error. This error's path is shown correctly, and even the button is working: