Unable to set breakpoints for nextjs app

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.

[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