Unable to set breakpoints for nextjs app

[Naxos84]

I'm trying to debug my nextjs app with Firefox.

I managed to debug it with chrome.

The error is that firefox can't find the files. I already tried to add pathMappings but that is a lot to do and it still does not find components that are used inside these mappings. Besides that: the chrome extension does not need these path mappings.

// launch.json

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "firefox",
            "request": "launch",
            "reAttach": true,
            "name": "Firefox",
            "url": "http://localhost:3000/",
            "webRoot": "${workspaceFolder}",
            "pathMappings": [
                {"url": "/", "path": "${workspaceFolder}/pages/index.tsx"}
            ]
        },
        {
            "type": "chrome",
            "request": "launch",
            "name": "Chrome",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}"
        },
        {
            "type": "node",
            "request": "attach",
            "name": "Server",
            "port": 9229
        }
    ],
    "compounds": [
        {
            "name": "QLS: FullChrome",
            "configurations": ["Server", "Chrome"]
        },
        {
            "name": "QLS: FullFirefox",
            "configurations": ["Server", "Firefox"]
        }
    ]
}

With the specified pathMappings I can set breakpoints in index.tsx

My demo repo: https://github.com/Naxos84/nextjs-firefox-debug-demo

node version: 12.16.0 npm version: 6.13.4 vscode: 1.45.1 OS: windows 10

If you need any additional info please let me know.

[hbenl]

Actually this should work without any path mappings. My guess is that you tried to set a breakpoint in a javascript file that had not been loaded by Firefox yet, so the Path Mapping Wizard popped up and made you think that you needed path mappings (at least that's what happened to me in my Next.js sample project). I'll try to make the Path Mapping Wizard less confusing in this situation:

• it will check first if it will be able to create a path mapping at all and won't pop up if it can't (so in many situations where the file simply hasn't been loaded yet, it won't pop up at all)
• I will also change the message to this:

This file's path isn't mapped to any url that was loaded by Firefox.
Either this file hasn't been loaded by Firefox yet or your debug configuration needs
a pathMapping for this file - do you think the file has already been loaded and want to
let the Path Mapping Wizard try to create a pathMapping for you?

[Naxos84]

Ok. I'm making some progress after revisiting this.

I can debug files that are accessed directly via the generated mappings

"pathMappings": [
                {
                    "url": "webpack:///components",
                    "path": "${workspaceFolder}/components"
                },
                {
                    "url": "webpack:///pages",
                    "path": "${workspaceFolder}/pages"
                }
            ]

But when something from pages references something from components via import then it is not working. Reason might be that everything needed is compiled into the js representation inside pages

So I guess I have to adapt my build or such.

Anyway: The new info message (you mentioned) is great!

[Naxos84]

Ok I tried it with an example repo of the nextjs team

At first everything worked fine. (cause the components directory is flat. If I move layout.tsx to ${REPO}/components/layout/layout.tsx then the breakpoints inside layout.tsx are not triggered.

The chrome-devtools are able to debug everything (even without any pathmappings)

[hbenl]

Thanks for pointing me to this sample - however, I was unable to reproduce your issue with it. I see that this sample requires path mappings, but with the mappings you have given, I can set and hit breakpoints even after moving and renaming the files in pages and components. Did you update all imports for those files (VS Code usually does this automatically, but you may still have to save those changes)? Did you try restarting the browser and/or dev-server?

[thiras]

This issue still exists. @hbenl you can test it with any nextjs example app.

[thiras]

@hbenl The issue still exists. Please test it again with https://github.com/vercel/next-learn-starter/tree/master/demo

I'm migrating to Chrome right now. This extension is completely broken with Next.js. @Naxos84's path mapping doesn't work. The extension offers to add some mapping and they don't work too

      "pathMappings": [
        {
          "url": "webpack://_n_e/pages",
          "path": "${workspaceFolder}/pages"
        },
        {
          "url": "webpack://_n_e/components",
          "path": "${workspaceFolder}/components"
        }
      ]

Please also try against any breakpoint that calls other than a page of component (for example a lib). In some cases, I've able to debug against some components but totally unstable

[deshiknaves]

Yeah, this is my experience too. Chrome works fine, but the pathMapping on this just doesn't work with a nextjs app