Warnings when debugging in VS Code

[breyed]

What version of Next.js are you using?

10.1.3

What version of Node.js are you using?

v14.16.1

What browser are you using?

Safari

What operating system are you using?

macOS

How are you deploying your application?

Vercel

Describe the Bug

Debugging a starter Next.js installation shows several warnings. Even if they are benign, they make it hard to notice other warnings that may appear as the project is developed.

VS Code shows the following on the Debug Console:

Could not read source map for file:///Users/brey/Code/Sandbox/nextjs-test/node_modules/@next/react-refresh-utils/ReactRefreshWebpackPlugin.js: ENOENT: no such file or directory, open '/Users/brey/Code/Sandbox/nextjs-test/node_modules/@next/react-refresh-utils/ReactRefreshWebpackPlugin.js.map'
Could not read source map for file:///Users/brey/Code/Sandbox/nextjs-test/node_modules/@next/react-refresh-utils/loader.js: ENOENT: no such file or directory, open '/Users/brey/Code/Sandbox/nextjs-test/node_modules/@next/react-refresh-utils/loader.js.map'
Could not read source map for file:///Users/brey/Code/Sandbox/nextjs-test/node_modules/@next/react-refresh-utils/internal/ReactRefreshModule.runtime.js: ENOENT: no such file or directory, open '/Users/brey/Code/Sandbox/nextjs-test/node_modules/@next/react-refresh-utils/internal/ReactRefreshModule.runtime.js.map'

Expected Behavior

No warnings.

To Reproduce

1. npx create-next-app nextjs-test --use-npm
2. Add to packages.json in scripts: "debug": "NODE_OPTIONS='--inspect' next dev",.
3. Create .vscode/launch.json with:

{
	"version": "0.2.0",
	"configurations": [
		{
			"type": "node",
			"request": "attach",
			"name": "Launch Program",
			"skipFiles": ["<node_internals>/**"],
			"port": 9229,
			"cwd": "${workspaceFolder}/Server"
		}
	]
}

4. npm run debug
5. Run this command in VS Code: Debug: Start Debugging.

[apollonian]

Looks like we are generating all the required source maps in the react-refresh-utils package, but they're not included in the published package/tarball. @timneutkens We could add *.js.map to files in order to fix this. Let me know if I'm headed in the right direction (would be happy to send in a PR! UPDATE: Opened one). cc @Timer

[TyMick]

Hi, @breyed— Do the following VS Code launch configurations added to documentation in #28815 help at all?

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

These may need some fiddling if the root of your app is at ${workspaceFolder}/Server; I'm not sure. But in general, VS Code's built-in JavaScript debugger has gotten much better at finding source maps with the node-terminal and pwa-chrome launch types.

[Pickra]

THANK YOU @TyMick !
All 3 configs work! I did need to add "cwd": "${workspaceFolder}/allTheThings", to the Next.js: debug full stack config.
This needs to live in the docs - #24349 (comment)

I have spent centuries trying to debug nextjs via vscode. I dub thee holy saint of the confusing vscode config. Please be my friend...

[Pickra]

ok, I take it back. Next.js: debug client-side works great, thank you, but I'm still having trouble with Next.js: debug server-side + Next.js: debug full stack. The both run but they both have unbound breakpoints when debugging the nextjs package/node_module. At this point, I wana debug node_modules/next/dist/client/dev/error-overlay/hot-dev-client.js

i still wana be friends.

Help me, @TyMick , you're my only hope...

[cassioseffrin]

I have the same problem of @Pickra. Seems like it's a nextjs have bug to debug server side. No way to debug server side. I have followed the official docs but no success

[callum-gander]

Anything further on this? same issue, same config from the docs

[fieldingtron]

finding this same issue as well with nextjs' new release 13,, it would be nice to debug in vscode with breakpoints

[metalmarker]

@apollonian @Timer This issue still exists... can you please take a look at it? It is pretty distracting to see these warnings each time we refresh a client under debug.

[c9cuu]

on the server side, maybe you need to settle breakpoints before run and debug on VSCode.

[Pedanfer]

Hey all! After 2 days spent copying and pasting and not very wisely barely reading documentation (lol, won't happen next time), I have a hacky way to debug fully from VSCode, client and server side.

My launch.json is

  "autoAttachChildProcesses": true,
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Client",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000"
    },
    {
      "name": "Next.js: debug full stack",
      "cwd": "${workspaceFolder}",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm run dev",
      "serverReadyAction": {
        "action": "startDebugging",
        "pattern": "started server on .+, url: (https?://.+)",
        "name": "Client"
      }
    }
  ]
}

Straightforward, it launchs Chrome and vscode by default attaches the server-side-working (doesn't work for client side for me) debugger to it. It also prints in your console client side logs, which without this config it didn't.

NextJS shouldn't have in https://nextjs.org/docs/pages/building-your-application/configuring/debugging outdated recommendations: "debugWithChrome" uses Debugger for Chrome which has been deprecated for a long time. Now VSCode uses the extension JavaScript Debugger and automatically will debug your launched process (although several node processes are actually launched and that's why autoAttachChildProcesses can be useful).

OK, so this is not the actual fix, just side notes about what I learned. The hacky solution to client side code breakpoints being useless is using the reserved word debugger instead, which works like a breakpoint. It's hacky and sucks but it lets you debug fully from your IDE if you're used to that.