Breakpoints aren't working with Next.js app

Issue

I am unable to get a breakpoints to work in a next.js application.

Here’s my current firefox configuration:

{
    "type": "firefox",
    "request": "launch",
    "name": "Debugger:firefox",
    "url": "http://localhost:3000",
    "webRoot": "${workspaceFolder}",
    "skipFiles": [
      "node-modules/**"
    ],
    "clearConsoleOnReload": true,
  }

This properly launches a firefox instance against localhost, however, when I attempt to add a breakpoint in my editor, I end up seeing this popup in my editor:

Selecting ‘yes’ for the path mapping wizard does nothing.

Here’s my working chrome configuration for comparison:

{
    "type": "chrome",
    "request": "launch",
    "name": "Launch Chrome against localhost",
    "url": "http://localhost:3000",
    "webRoot": "${workspaceFolder}",
    "sourceMaps": true,
    "smartStep": true,
    "skipFiles": [
      "node-modules/**",
      "interpreter.js"
    ]
  }

Suggestion

This is a bare bones next.js app. Since next.js is becoming more of a popular React.js framework, it might be helpful to have an example in the documentation (provided that this extension is compatible).

[jasonwilliams]

Its working better for me too

[h-jennings]

@hbenl Looks like it’s working much better! I just tested it out in the same app and was able to get it up and running with my previous configuration, with only one additional path map (I was able to use the Path Mappings Wizard for this).

Excited to use this in future projects! Thanks so much for the hard work.