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.

[cbrunnkvist]

Yikes, this issue is growing old. 🙁 I was expecting there to be launch.json example for Safari to open and stuff kind of just work... Maybe that's not precisely what this ticket is about, but... Google got me here 🙄

LEAST COMPLICATED .vscode/launch.json
If we just rely on the default URL opener it will .. open in the default browser - which is Safari in the default case on macOS, which was just what I wanted. Just start the dev server first..:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Next.js: debug full stack",
            "type": "node-terminal",
            "request": "launch",
            "command": "npm run dev",
            "serverReadyAction": {
                "pattern": "- Local:.+(https?://.+)",
                "uriFormat": "%s",
                "action": "openExternally"
            }
        }
    ]
}

[GuiSim]

It's 2024 and I still have no idea how to debug server side code in NextJS.
Is anyone able to do the following:

• Start next dev
• Attach the VSCode debugger to next dev
• Create a breakpoint in VSCode in a API call route
• Call that API route
• Hit the breakpoint
  ?

As a test, I created a new NextJS project, added a new dummy route, added debugger;, attached to the next dev process and the debugger; call never stops the execution of the node process.

I feel like I have to be missing something obvious. Surely debugging works in Next 14 and surely the default new project scaffolding supports it?

[Apezdr]

Sporadically I am able to get it to debug server side code but it's recently gotten less consistent. Files under the directory /src/utils/ aren't being consistently picked up for debugging due to source mapping issues that I'm unaware of how to fix.

The file I'm working in has 'use server' directive at the top.

Could not load source '/(rsc)/src/utils/admin_frontend_database.js': Source not found.

I was able to fix this issue by implementing the webpack config in my next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  // ESLint Configuration
  pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
  eslint: {
    // Run ESLint on these directories during the build process
    dirs: ['app', 'components', 'layouts', 'scripts'],
    // Ensure ESLint runs in development and fails the build on errors
    ignoreDuringBuilds: false,
  },
  images: {
    minimumCacheTTL: 604800,
    domains: [
      'm.media-amazon.com',
    ],
  },
  // Additional Next.js configurations can be added here
  webpack(config) {
    Object.defineProperty(config, 'devtool', {
      get() {
        return 'source-map';
      },
      set() {},
    });
    return config;
  },
}

module.exports = nextConfig

It will give a warning that it has reverted the webpack devtool but in effect it seems to have fixed the issue.

Warning: Reverting webpack devtool to 'eval-source-map'.
Changing the webpack devtool in development mode will cause severe performance regressions.
Read more: https://nextjs.org/docs/messages/improper-devtool

[avianion]

@Apezdr are you using --turbo here?

[Apezdr]

@Apezdr are you using --turbo here?

My command for running the server didn't have any special commands like that. I am pretty sure not.

[petejodo]

@Apezdr's fix worked for me on v14.1.3, thanks! Also --turbo seems to not work with breakpoints at all