vercel / vercel/next.js

Path to the file with errors not relative to working directory inside monorepo breaking editor integration

Open
#78,616 1 comment 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Error Overlay linear: turbopack Turbopack
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
  1. Go to apps/web.
  2. Run the dev server pnpm run dev
  3. Open the app inside the browser e.g. on http://localhost:3000/
  4. 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.

Image

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:

Image

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 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.