Warnings when debugging in VS Code #24349

breyed · 2021-04-22T11:17:54Z

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

npx create-next-app nextjs-test --use-npm
Add to packages.json in scripts: "debug": "NODE_OPTIONS='--inspect' next dev",.
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"
		}
	]
}

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

The text was updated successfully, but these errors were encountered:

apollonian · 2021-04-22T17:53:19Z

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 · 2021-09-17T15:23:28Z

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 · 2021-09-29T16:59:55Z

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 · 2021-09-30T20:57:29Z

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 · 2022-04-24T00:41:17Z

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 · 2022-08-25T16:27:12Z

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

fieldingtron · 2022-11-02T01:43:50Z

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

metalmarker · 2023-05-21T18:24:07Z

@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 · 2023-08-17T04:00:10Z

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

Pedanfer · 2023-10-07T10:10:18Z

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 · 2023-10-25T10:03:34Z

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 · 2024-01-16T21:13:38Z

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 · 2024-03-07T02:19:39Z

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 · 2024-03-22T12:32:23Z

@Apezdr are you using --turbo here?

Apezdr · 2024-03-22T13:54:56Z

@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 · 2024-03-29T14:38:10Z

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

breyed added the bug Issue was opened via the bug report template. label Apr 22, 2021

timneutkens added good first issue Easy to fix issues, good for newcomers and removed bug Issue was opened via the bug report template. labels Apr 22, 2021

apollonian mentioned this issue Apr 23, 2021

chore: Only generate source maps for development builds #24373

Closed

8 tasks

luisorbaiceta mentioned this issue Aug 4, 2023

Missing *.js.map files when debugging #53558

Open

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Warnings when debugging in VS Code #24349

Warnings when debugging in VS Code #24349

breyed commented Apr 22, 2021

apollonian commented Apr 22, 2021 •

edited

Loading

TyMick commented Sep 17, 2021

Pickra commented Sep 29, 2021 •

edited

Loading

Pickra commented Sep 30, 2021

cassioseffrin commented Apr 24, 2022

callum-gander commented Aug 25, 2022

fieldingtron commented Nov 2, 2022

metalmarker commented May 21, 2023

c9cuu commented Aug 17, 2023

Pedanfer commented Oct 7, 2023 •

edited

Loading

cbrunnkvist commented Oct 25, 2023 •

edited

Loading

GuiSim commented Jan 16, 2024

Apezdr commented Mar 7, 2024 •

edited

Loading

avianion commented Mar 22, 2024

Apezdr commented Mar 22, 2024

petejodo commented Mar 29, 2024

Warnings when debugging in VS Code #24349

Warnings when debugging in VS Code #24349

Comments

breyed commented Apr 22, 2021

What version of Next.js are you using?

What version of Node.js are you using?

What browser are you using?

What operating system are you using?

How are you deploying your application?

Describe the Bug

Expected Behavior

To Reproduce

apollonian commented Apr 22, 2021 • edited Loading

TyMick commented Sep 17, 2021

Pickra commented Sep 29, 2021 • edited Loading

Pickra commented Sep 30, 2021

cassioseffrin commented Apr 24, 2022

callum-gander commented Aug 25, 2022

fieldingtron commented Nov 2, 2022

metalmarker commented May 21, 2023

c9cuu commented Aug 17, 2023

Pedanfer commented Oct 7, 2023 • edited Loading

cbrunnkvist commented Oct 25, 2023 • edited Loading

GuiSim commented Jan 16, 2024

Apezdr commented Mar 7, 2024 • edited Loading

avianion commented Mar 22, 2024

Apezdr commented Mar 22, 2024

petejodo commented Mar 29, 2024

apollonian commented Apr 22, 2021 •

edited

Loading

Pickra commented Sep 29, 2021 •

edited

Loading

Pedanfer commented Oct 7, 2023 •

edited

Loading

cbrunnkvist commented Oct 25, 2023 •

edited

Loading

Apezdr commented Mar 7, 2024 •

edited

Loading