Next.js example does not seem to work with next@^6.0.0.0

[nicolas-marien]

Hello,

I'm trying to debug Next.js applications, running with the latest version of next.js which is 6.0.3. But I did not manage to have my breakpoints recognized in the vscode node debugger.

To reproduce, you can clone nextgram and update next (also react and react-dom) to the latest version.

Here is my launch configuration. I changed the runtimeExecutable to use the local next installation:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Next: Chrome",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}"
        },
        {
            "type": "node",
            "request": "launch",
            "name": "Next: Node",
            "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/next",
            "runtimeArgs": [
                "--inspect"
            ],
            "port": 9229,
            "console": "integratedTerminal"
        }
    ],
    "compounds": [
        {
            "name": "Next: Full",
            "configurations": ["Next: Node", "Next: Chrome"]
        }
    ]
}

All my breakpoint are Unverified breakpoint, Breakpoints set but not yet bound so I assume this could be a source map issue.

I'm running MacOS 10.13.3 with Node v10.1.0 and npm 6.0.1.
Did someone experience a similar issue ❓
Thank you 😸

[timjbray]

Hello,
I have the same issue - same platform (MacOS) & latest Node, npm
Unverified breakpoint, Breakpoint ignored because generated code not found (source map problem?)
Thanks!

[frol]

The same issue here:

OS: Arch Linux, x64
VS Code 1.23.1
Node.js 10.2.1
Next.js 6.0.3
React 16.4.0

[jamesgibson14]

Same problem with launch.json:
MacOS
node: 8.11.1
"next": "^6.0.3",
"react": "^16.4.0",
"react-dom": "^16.4.0"

[timmywil]

Here are some notes that might help us figure out what's wrong. These are just things I noticed when trying to debug this issue.

1. next.js 6 is using the babel core 7 beta. I don't mention this because I know of any issue with sourcemap creation in babel 7. I only mention it because there may be something different there. Sourcemaps have their own spec and should be unaffected, but you never know.

2. I also noticed that while breakpoints set in vs code remain unverified, breakpoints on webpack sources do work when using Chrome devtools directly. Nevertheless, when the breakpoint is hit, vs code does break when devtools does, but while devtools breaks correctly on the source file, vs code breaks on the compiled index.js file.

[timmywil]

I was able to fix the issue for myself. I was staring at the source map for a while and noticed that the ./ was missing from the paths that didn't include node_modules (e.g. "webpack:///actions/index.js" instead of "webpack:///./actions/index.js"). I tried the following and it worked:

...
      "sourceMapPathOverrides": {
        ...
        "webpack:///*": "${webRoot}/*"
      },
...

I don't know if this is the proper fix. Maybe there is an issue in babel, next.js, webpack, or vs code, but this got breakpoints working again.

[leifdalan]

@timmywil I build from the /src folder (next build src). From your solution, where would I append /src? I've tried a few things:

{
            "type": "chrome",
            "request": "launch",
            "name": "Next: Chrome",
            "url": "http://localhost:8000",
            "webRoot": "${workspaceFolder}/src",
            "sourceMapPathOverrides": {
                "webpack:///*": "${webRoot}/src/*"
            },

        },

and every permutation of adding/removing /src to webRoot and the webpack sourceMapPathOverrides. Any help/advice would be greatly appreciated! I miss my breakpoints.

[timmywil]

@leifdalan I'm not sure, but note that you should probably still keep the other default entries in sourceMapPathOverrides.

[auchenberg]

Issue seems to be related to a change in next.js. I've opened an issue on their side: vercel/next.js#4571

[leifdalan]

@timmywil's fix worked for me. Thanks!

[nicolas-marien]

@timmywil Thank, w/ your solution Chrome debugging worked. Still no luck for server side code, like getInitialProps. Thank @auchenberg for opening an issue on Next side.

[zerocity]

This is working for me on the server side and client side

{
          "type": "chrome",
          "request": "launch",
          "name": "Next: Chrome",
          "url": "http://localhost:3000",
          "webRoot": "${workspaceFolder}",
          "sourceMapPathOverrides": {
            "webpack:///*": "${webRoot}/*"
          },
      },
      {
          "type": "node",
          "request": "launch",
          "name": "Next: Node",
          "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/next",
          "runtimeArgs": [
              "--inspect"
          ],
          "sourceMapPathOverrides": {
            "webpack:///*": "${workspaceFolder}/*"
          },
          "port": 9229,
          "console": "integratedTerminal"
      }

[lipp]

Trying the debug config for next.js 7. Still not working for Chrome. Breaking at random source lines. @zerocity config is not working for me.

Debugging in Chrome dev tools is working -> not sure it is a Next.js issue.

[justinphilpott]

I have the same issue, unpredictable code breaking, rather depressing!
@zerocity not working for me.

Any updates? Thanks! :)

[zerocity]

I tested the config on windows with next 7 and it works.
I changed only
"console": "integratedTerminal" ->
"console": "internalConsole"
i had some issues with WSL.
here is example repo https://github.com/zerocity/vscode-next-debugger-test

[MobinHiq]

Got the same issue, I tried everything and still does not work! It just randomly jumps over some line and breaks in some line that it doesn't have any breakpoints!

[zerocity]

Mostly if it jumps something is wrong with the sourcemaps configuration.

[auchenberg]

Duplicate of #80