Path to the file with errors not relative to working directory inside monorepo breaking editor integration
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 142k
- Forks
- 32.4k
- Avg merge
- 2d 14h
- Merged PRs (30d)
- 351
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:
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 reproduction repository, go to apps/web, and run pnpm run dev with the error overlay enabled. Compare the import-level error path with the path from the reference error described in the issue. Done means the overlay path is relative to the directory where next dev runs and the VS Code editor link resolves correctly.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, nextjs, react
- Domain
- build-system, devtools, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 40/100