VS Code cannot bind breakpoints in a Turborepo Next.js project

[michaelschufi]

Link to the code that reproduces this issue

https://github.com/michaelschufi/turbo-debug-nextjs-repro

To Reproduce

1. Using VS Code, open either
   the file turbo-debug-nextjs-repro.code-workspace:

   code turbo-debug-nextjs-repro.code-workspace
   

   or the folder apps/docs/:

   code apps/docs
   

2. Open the file app/page.tsx inside the folder apps/docs/.

3. Set a breakpoint on the same line as the console.log.

4. Start the debugger and open the page in a browser.

Current vs. Expected behavior

Observe

• the debugger NOT stopping at the breakpoint
  • the debugger stopping at the debugger statement
  • the debugger opening a second VS Code file tab
  • the paths of the two tabs not matching when hovering over the tab labels (see screenshot below)

-> As can be seen: The debugger kind of adds the relative path to the workspace folder to the path of the file it is debugging - resulting in doubling the path segments.

- ~/repos/turbo-debug-nextjs-repro/apps/docs/app/page.tsx
+ ~/repos/turbo-debug-nextjs-repro/apps/docs/apps/docs/app/page.tsx

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.0.3 // Latest available version is detected (15.0.3).
  eslint-config-next: N/A
  react: 19.0.0-rc-66855b96-20241106
  react-dom: 19.0.0-rc-66855b96-20241106
  typescript: 5.5.4
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Developer Experience, Turbopack

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

I think, this might also be related to the Next.js dev error window's path not matching the editor's CWD - instead it also outputs the path from the monorepo-root instead of the CWD where next dev was called.

Note: I don't know if this is a Next.js, Turborepo, Turbopack, or a VS Code issue - probably a bit of all of them 😅

[emilioestebanez]

I think this is the same thing as #73214

[samcx]

@michaelschufi Closing in favor of the other one mentioned above!

[michaelschufi]

Hmm, I'm not sure. For me at least, the breakpoint in #73214's repo binds fine.
Also, this issue is about the breakpoints not binding in a Turborepo monorepo because Next.js seems to add the relative path to the workspace folder to the path of the file it is debugging - resulting in doubling the path segments.

Edit:
It's definitely a different issue @samcx (see #73214 (comment)).
The other issue is about a breakpoint not binding on Windows, whereas for this one, all platforms are affected by the current behaviour.

[Falven]

Hmm, I'm not sure. For me at least, the breakpoint in #73214's repo binds fine. Also, this issue is about the breakpoints not binding in a Turborepo monorepo because Next.js seems to add the relative path to the workspace folder to the path of the file it is debugging - resulting in doubling the path segments.

Edit: It's definitely a different issue @samcx (see #73214 (comment)). The other issue is about a breakpoint not binding on Windows, whereas for this one, all platforms are affected by the current behaviour.

This is definitely an issue. I posted a temporary workaround here vercel/turborepo#9579 the problem with this workaround is it breaks every other form of debugging e.g. if you want to debug your package from your tests… so I’m looking for some better guidance, maybe some way to modify the source roots only from the NextJS app with turbo/web pack.