VsCode debugger unbound breakpoints: can't find source maps

[AndyOooh]

Hi,

I'm trying to use the built-in debugger in vscode for my Nextjs typescript app. However all the breakpoints turn grey/unbound when I start it. I get:
Could not read source map for

I have "sourceMap": true in my base.json tsconfig file which is extended into my Nextjs tsconfig.
I'm using the boilerplate launch.json from nextjs docs, which I have placed in .vscode in root of the repo. My Nextjs project is in apps/app.

Launch.json:

{
    "version": "0.2.0",
    "configurations": [
      {
        "name": "Next.js: debug server-side",
        "type": "node-terminal",
        "request": "launch",
        "command": "yarn dev"
      },
      {
        "name": "Next.js: debug client-side",
        "type": "chrome",
        "request": "launch",
        "url": "http://localhost:3001",
        // "webRoot": "${workspaceFolder}",
      },
      {
        "name": "Next.js: debug full stack",
        "type": "node-terminal",
        "request": "launch",
        "command": "yarn dev",
        "serverReadyAction": {
          "pattern": "started server on .+, url: (https?://.+)",
          "uriFormat": "%s",
          "action": "debugWithChrome"
        }
      }
    ]
  }

In the second item, I have tried a few paths for "webRoot", including not setting it and:
"${workspaceFolder}"
"${workspaceFolder}/apps/app"
"${workspaceFolder}/apps/app/src"

I have also tried placing launch.json in apps/app/.vscode

The repo and all apps are newly created so all versions should be up to date, including vscode version.
I'm running Ubuntu on wsl2.

Any ideas?

[guizero]

I am interested in this as well...

[guizero]

Still interested... I have had some ideas. I'll experiment with them whenever I have time.

[shimizu-saffle]

Hi @AndyOooh,

I understand you're facing issues with unbound breakpoints in a Next.js TypeScript app within a Turborepo environment. I had a similar challenge and managed to find a solution that worked for me.
Here's the configuration that worked for me:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Next.js Node Debug",
            "runtimeExecutable": "${workspaceFolder}/node_modules/next/dist/bin/next",
            "cwd": "${workspaceFolder}/apps/app",
            "console": "integratedTerminal"
        }
    ]
}

This configuration is specifically tailored for debugging a Next.js app in a monorepo environment. The key was setting the correct working directory ("cwd") to the app's location.

Based on your description, it seems like your issue might be related to how the debugger is mapping your source files. I suggest trying a simplified setup like mine and ensuring the working directory is set correctly. This approach might resolve the unbound breakpoints issue you're experiencing.

I hope this helps you to debug your Next.js app in the Turborepo environment successfully!

[dBianchii]

I need this so bad