Visual Code debugger setup for NextJS results in Unbound breakpoints

[jimin4]

I've followed the instructions at https://nextjs.org/docs/advanced-features/debugging

// inside package.json
"scripts": {
  "dev": "NODE_OPTIONS='--inspect' next dev -p 80",
  "build": "next build",
  "start": "next start"
},

I started the nextjs server with yarn dev
Then I attached the debugger successfully to the running server.
However when I put break points in my API files, I get the greyed out Unbound breakpoint.
Why is this happening?

[zuhair-naqvi]

Same, any pointers?

[jeff-kilbride]

I have the same issue. Obviously, the unbound breakpoints have something to do with sourcemaps. I don't know if these are related, but I get the following errors in the vscode Debug Console:

Could not read source map for file:///Users/jeff/VSCode/test/node_modules/next/dist/compiled/path-to-regexp/index.js: ENOENT: no such file or directory, open '/Users/jeff/VSCode/test/node_modules/next/dist/compiled/path-to-regexp/index.js.map'

Could not read source map for file:///Users/jeff/VSCode/test/node_modules/@next/react-refresh-utils/ReactRefreshWebpackPlugin.js: ENOENT: no such file or directory, open '/Users/jeff/VSCode/test/node_modules/@next/react-refresh-utils/ReactRefreshWebpackPlugin.js.map'

Maybe this will help someone figure out the problem...

[jeff-kilbride]

Well, now it works!

I tried setting productionBrowserSourceMaps: true in next.config.js and restarting the dev server. The breakpoints were still showing up as unbound and greyed out, but I decided to give it a shot and see what happened. The debugger stopped on the correct line and now all my breakpoints are solid red.

Honestly, I have no idea what changed. I removed the productionBrowserSourceMaps setting from next.config.js and it's still working. I'm also no longer getting the errors in the Debug Console -- even though the files referenced in those errors still don't exist. There are only two things I can think of:

1. You just need to run your project with the unbound breakpoints and see if they are hit correctly. Maybe something needs to be loaded the first time through?
2. The project needs to be run once with the productionBrowserSourceMaps setting. (highly unlikely, but maybe??)

Good luck to anyone else with this issue.

[mwoodpatrick]

If I run

npx nx build site

then this command mostly respects the setting of:

productionBrowserSourceMaps

in next.config.js except that it does not generate map files for any of my files in the API subdirectory. Does anyone know why it would skip these files

However, when I run:

npx nx serve site

it does not appear to generate any map files.

Does anyone know why this is happening or the best way to debug?

[ose1955]

I had the same issue with unbound breakpoints only with API files. Solved by the following:

• Open the launch.json and click "Add configuration..." button.
• Add the "Node.js: Attach" configuration. I have this one:

    {
        "name": "Attach",
        "port": 9229,
        "request": "attach",
        "skipFiles": [
            "<node_internals>/**"
        ],
        "type": "pwa-node"
    }

• Start npm run dev in the terminal
• Run the API request in the browser, e.g.http://localhost:3000/api/test
• Select "Attach" from the Debug menu and start debugging.

All breakpoints become active.

Hope it helps!

[nitirajr]

I got this issue in dec 2024, using the current nextjs doc with the starter project on windows.
For me debugging worked after removing the --turbopack from package.json script.
I guess something to do with the sourcemaps generated by turbopack, but I am completely new to this, so not sure.

in package.json

"scripts": {
   "build": "next build",
   "dev": "next dev --turbopack",   # remove this --turbopack
   "start": "next start"
 },

[weeix]

As suggested by nitirajr, the breakpoints worked after disabling Turbopack. However, I still want to utilize Turbopack when not debugging, due to its improved speed, so I modified launch.json instead of package.json:

.vscode/launch.json:

{
    ...
    "configurations": [
      {
        "name": "Next.js: debug server-side",
        "type": "node-terminal",
        "request": "launch",
        "command": "npx next dev"    // replace "npm run dev" with "npx next dev"
      },
      ...
    ]
}

[roicahana]

@weeix Thanks, that worked for me!

For anyone else looking, this is works for server and client side:

{
	// Use IntelliSense to learn about possible attributes.
	// Hover to view descriptions of existing attributes.
	// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
	"version": "0.2.0",
	"configurations": [
		{
			"name": "Next.js: Server",
			"type": "node-terminal",
			"request": "launch",
			"command": "npx next dev"
		},
		{
			"name": "Next.js: Client",
			"type": "chrome",
			"request": "launch",
			"url": "http://localhost:3000"
		}
	],
	"compounds": [
		{
			"name": "Debug Next.js (Client + Server)",
			"configurations": ["Next.js: Client", "Next.js: Server"]
		}
	]
}

[aronfiechter]

And if your app is not in the workspace root, e.g., it's inside a src/ subfolder, remember to:

• add "cwd": "${workspaceFolder}/src" to your server config
• add "webRoot": "${workspaceFolder}/src" to your client config

Hope this helps someone else!

[ELBEQQAL94]

It works well but after do the following modifications:

{
        "name": "Next.js: Server",
        "type": "node-terminal",
        "request": "launch",
        "command": "npx next dev",
        "cwd": "${workspaceFolder}/main"
      },
      

Thanks @roicahana