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.

[michaelschufi]

@Falven I think the problem happens even without any other internal workspace dependencies.
Could the issue be due to Next.js assuming the node_modules root folder is always in Next.js's project folder and not above, like in a monorepo with symlinks?

[AndreMaz]

Had the same issue with my project that uses t3-oss template.

After bumping next to v15.2.0-canary.8 and turbo to v2.3.3 my debugger started to work again

Server config:

    {
      "name": "Next.js: debug server-side",
      "type": "node-terminal",
      "request": "launch",
      "command": "pnpm run dev",
      "cwd": "${workspaceFolder}/apps/web/",
      "skipFiles": ["<node_internals>/**"]
    },

[michaelschufi]

Thank you @AndreMaz

This seems to be fixed already in v15.1.1-canary.14. Upgrading the reproduction repo's Next.js project to said version fixes the issue.
Probably was fixed by

• [Turbopack] fix root and project path usages in a monorepo: [Turbopack] fix root and project path usages in a monorepo #73552

BTW, this also fixes the path not matching in Next.js' error modal in dev mode.

FYI, the mentioned fix is not yet in the stable version. The latest stable version 15.1.4 does not include the fix yet.

Should I close this issue now that it is in canary?

[michaelschufi]

I'm closing this, as the original issue (the path one) seems to be resolved. Thanks!

However, I still experience problems binding breakpoints in some cases. I will open a new issue if I can find a reproducible case.