vscode-js-debug: SourceMaps don't bind on latest next.js version server side (Docker)

Describe the bug Next.js now uses eval-source-map from version 9 onwards. It looks like eval-source-map generates webpack-internal:///./ references.

I added the settings below but it makes no difference:

      "sourceMapPathOverrides": {
        "webpack-internal:///./": "${workspaceFolder}/"
      }

I wonder if https://github.com/microsoft/vscode-js-debug/blob/e2191de3d65c8e90be183bd545ec8441972566a2/src/targets/browser/browserPathResolver.ts#L111-L113 has anything to do with it?

Should webpack-internal:///./ be added to this list? https://github.com/microsoft/vscode-js-debug/blob/4d7737fbb65cf6485bd333e03f5319ceafaa797e/src/configuration.ts#L931-L939

To Reproduce Steps to reproduce the behavior:

Clone https://github.com/jasonwilliams/nextjs9-typescript-server-vscode-example
yarn install
docker-composer up
Launch -> launch server (Docker)
set a breakpoint in pages/index.tsx

Log File

VS Code Version: 1.51

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 18 (16 by maintainers)

Most upvoted comments

I’m not able to bind breakpoints for server side debugging in latest next.js (14.0.1 as of this writing, but also 13.5.6) using vs code. Jumping on this thread because it’s unclear to me whether this is the same bug or something else.

Here’s the relevant part of my launch.json:

    "configurations": [
        {
            "name": "Next.js: debug server-side",
            "type": "node",
            "address": "127.0.0.1",
            "port": 9229,
            "request": "attach",
            "sourceMaps": true,
            "skipFiles": ["<node_internals>/**"]
        },
...

my tsconfig.json includes "sourceMap:" true. I’m running my app using the following command: "NODE_OPTIONS='--inspect=9229' next dev.

I’m able to attach to the debugger, I see a log about it in the terminal window for my next app. If I use --inspect-brk, execution stops a next internals line (node_modules/next/dist/bin/next, I think). But any breakpoint I set in my api route (which is in app/api/.../route.ts) doesn’t bind, and the troubleshooter shows some info about including "sourceMap": true in my tsconfig. Here’s what it looks like in vs code in my file, and in the troubleshooter: Screen Shot 2023-11-01 at 8 32 00 AM Screen Shot 2023-11-01 at 8 33 39 AM Screen Shot 2023-11-01 at 8 34 04 AM

I’ve scoured the next.js debug docs, a bunch of github issues, and plenty of people’s posts about similar issues (although they’re mostly from 2022, so it’s unclear to me if they’re relevant to newer versions of next or setups that use the app folder. I’ve tried adding sourceMapPathOverrides with the value "webpack-internal:///./": "${workspaceFolder}/" to my launch.json, and maybe a couple of other solutions, but no luck.

Is it possible to use breakpoint debugging with app folder api routes in next 14.0.1?

Edit: Adding a debugger statement in my route.ts file got the debugger to stop on it. After that I was able to step through the file and subsequently I’m able to bind breakpoints. Why is this? Is it a reliable fix?

ericdvb on Nov 1, 2023

Setting resolveSourceMapLocations: null resolves the issue

Hey @connor4312 could you explain why setting this is required in NextJS projects? So hopefully i can add it to their documentation as i don’t think this will be obvious to newcomers who want to debug

jasonwilliams on Dec 10, 2020

Windows is always fun 🙂 Thanks for the info and wishes, spent a week hiking on the Oregon coast.

connor4312 on Dec 9, 2020

Actually, the scenario is narrower than I thought. For data URI sourcemaps, we use the path of the compiled file to see if we should resolve it. I put in a fix to remove the “protocol”, so webpack-internal:///./pages/index.tsx will turn into /pages/index.tsx for matching purposes, which the default glob is capable of dealing with. So I put in a targeted fix.

connor4312 on Dec 9, 2020