Unbound Breakpoints in VS Code

[drgj-7832]

I have a working website developed using next.js. I use VS Code as my development environment to write code, run dev builds, interact with Git, etc. However, I am having problems with setting breakpoints - here is a scenario:

• The website works fine
• I can add “debugger;” statements in my code and they break without issue in the browser’s (Safari) developer tools. All good so far.
• Within VS Code I can set a breakpoint at source-time before running the code (F5) - the breakpoint is correctly marked in the left-hand column of the editor by a solid red circle. All good so far.
• I now run a debug session from within VS Code by running F5. THE PROBLEM: for reasons I cannot determine, the solid red circles turn into hollow gray circles indicating ‘Unbound breakpoint’ and these breakpoints never trigger despite the execution path going through the code successfully..
• Interestingly, some breakpoints in other source files remain solid red and work/trigger fine.

I have tried many ways to determine why some breakpoints turn gray and don’t trigger. I am new to next.js and probably doing something fundamentally wrong. Any help is greatly appreciated.

[pawlean (Pauline P. Narvas)]

Hey, @drgj-7832! Welcome to the Vercel Community

Thanks for your patience

Could you make sure your .vscode/launch.json has the correct configuration for Next.js? For example:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Next.js: debug server-side",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/node_modules/next/dist/bin/next",
      "args": ["dev"],
      "console": "integratedTerminal",
      "skipFiles": ["<node_internals>/**"]
    },
    {
      "name": "Next.js: debug client-side",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000"
    }
  ]
}

[drgj-7832]

Hi pawlean,
My launch.json is copied below. Which ‘missing’ lines are critical for breakpoints to work in all source files? Thanks.

{
“version”: “0.2.0”,
“configurations”: [
{
“name”: “Next.js: Debug Dev Server”,
“type”: “node-terminal”,
“request”: “launch”,
“command”: “pnpm run dev”,
“skipFiles”: [“<node_internals>/**”]
}
]
}