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.

Start with the linked nextjs-firefox-debug-demo repository and reproduce the breakpoint failure using the Firefox configuration in launch.json. Compare breakpoint and source-file resolution for pages/index.tsx and nested components with Firefox versus Chrome, then verify that Firefox resolves the relevant files without extensive pathMappings.

Written by the indexing model from the issue text.