VSCode won’t bind client-side breakpoints for nextjs (9.5.2)

Asked By: Anonymous

In one of the recent updates to nextjs, client-side chrome debugging in vscode seems to have broken. When I launch the following configuration, none of my breakpoints are ever bound:

        {
            "type": "chrome",
            "request": "launch",
            "name": "Debug Chrome on localhost",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}/pathto/myapp"
        },

Note that I am using the Debugger for Chrome (v4.12.10) extension on VSCode (v1.48.1) and I am debugging the client side javascript served by nextjs (v9.5.2) running in Chrome, not the nextjs node process.

Does anyone know what’s changed and how to get the debugger to bind breakpoints again?

Solution

Answered By: Anonymous

Previously, vscode would (by default) use the following source map paths to interpret source maps served by webpack:

            "sourceMapPathOverrides": {
                "webpack:///./*": "${webRoot}/*",
                "webpack:///src/*": "${webRoot}/*",
                "webpack:///*": "*",
                "webpack:///./~/*": "${webRoot}/node_modules/*",
                "meteor://💻app/*": "${webRoot}/*"
            }

If you look in sources in chrome devtools, though, you can find the source maps under the mysterious _N_E path (the orange folders refer to sources with source maps).

It seems like in a recent update, in preparation for webpack 5, the nextjs team changed the path at which source maps are served: https://github.com/vercel/next.js/pull/15955

So this means that none of the default source map path overrides are resolving correctly.

Adding "webpack://_N_E/*": "${webRoot}/*" as an override fixed this issue!

Also, note the // double slash instead of the previous /// triple slashes.

Here’s my working launch config (put this under configurations in .vscode/launch.json:

        {
            "type": "chrome",
            "request": "launch",
            "name": "Debug Chrome on localhost",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}/pathto/myapp",
            "sourceMapPathOverrides": {
                "webpack://_N_E/*": "${webRoot}/*"
            }
        },

Don’t forget to change /pathto/myapp to the path of your app root in your repository. This could also end in /src if you’re using that. Or remove it entirely if you’re using nextjs out of the box!

Hope this helps someone! Sure left me scratching my head in confusion…

Edit:

I actually opened an issue over at nextjs pointing out some problems with their documentation. If many other people have this problem, I suggest making a note there so that the nextjs team become aware of it!

https://github.com/vercel/next.js/issues/16442