Missing *.js.map files when debugging

[luisorbaiceta]

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: linux
      Arch: x64
      Version: #1 SMP Fri Jan 27 02:56:13 UTC 2023
    Binaries:
      Node: 20.3.1
      npm: 9.6.7
      Yarn: 1.22.19
      pnpm: 8.6.6
    Relevant Packages:
      next: 13.4.12
      eslint-config-next: 13.4.10
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.1.6
    Next.js Config:
      output: N/A

Which area(s) of Next.js are affected? (leave empty if unsure)

App Router

To Reproduce

Create a new Next.js app with the app router under the src folder. Use the debug settings described in the docs. Set a breakpoint in any component. Start the server in dev mode and then starting the client side debug configuration.

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Next.js: debug server-side",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm run dev"
    },
    {
      "name": "Next.js: debug client-side",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000"
    },
    {
      "name": "Next.js: debug full stack",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm run dev",
      "serverReadyAction": {
        "pattern": "started server on .+, url: (https?://.+)",
        "uriFormat": "%s",
        "action": "debugWithChrome"
      }
    }
  ]
}

Describe the Bug

Could not read source map for file:///workspaces/rsc/node_modules/next/dist/compiled/%40next/react-refresh-utils/dist/runtime.js: ENOENT: no such file or directory, open '/workspaces/rsc/node_modules/next/dist/compiled/@next/react-refresh-utils/dist/runtime.js.map'
Could not read source map for file:///workspaces/rsc/node_modules/next/dist/compiled/%40next/react-refresh-utils/dist/internal/helpers.js: ENOENT: no such file or directory, open '/workspaces/rsc/node_modules/next/dist/compiled/@next/react-refresh-utils/dist/internal/helpers.js.map'

Expected Behavior

No missing *.js.map when debugging in visual studio code

Which browser are you using? (if relevant)

Chrome

How are you deploying your application? (if relevant)

No response

[luisorbaiceta]

Might be related to #24349

[0xFloyd]

running into this as well, banging my head trying to figure out why

[Sayvai]

I'm getting the same exact error messages as described from the authors' main description, missing both runtime.js.map and helpers.js.map files, after configuring my VS Code Debugger launch config file accordingly (launch.json):

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Next.js Frontend",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/webapp"
    }
  ]
}

Sidenote: I intentionally (and i believe correctly) added and set an additional webRoot property (not mentioned in Vercel documentation) to indicate that the actual Next.js app sits inside a sub-directory (/webapp) from the root of the project, to help point to the location of the Next.js app source code and source map scripts, in my particular circumstance.

It would be great if this issue is fixed, by possibly introducing the two missing *.map.js files(?) 🙏

[tompetk]

Just set up my first NextJS project and getting stuck at same issue. Can't debug properly with VS Code. Exactly same errors in output:

Could not read source map for file:///C:/src/Redeo.Web/src/node_modules/next/dist/compiled/%40next/react-refresh-utils/dist/runtime.js: ENOENT: no such file or directory, open 'c:\src\Redeo.Web\src\node_modules\next\dist\compiled\@next\react-refresh-utils\dist\runtime.js.map' Could not read source map for file:///C:/src/Redeo.Web/src/node_modules/next/dist/compiled/%40next/react-refresh-utils/dist/internal/helpers.js: ENOENT: no such file or directory, open 'c:\src\Redeo.Web\src\node_modules\next\dist\compiled\@next\react-refresh-utils\dist\internal\helpers.js.map'

Hard to believe everyone is not able to debug this? This is critical functionality for any sort of development.

[Sayvai]

Hi @balazsorban44 - not sure if this issue is picked up by any member of Vercel yet. Just wondering if this issue could be prioritised / triaged?

[tompetk]

In my case issue turned out to be VS Code version 1.83. Reverting back to 1.82 solved the issue.

[Sayvai]

In my case issue turned out to be VS Code version 1.83. Reverting back to 1.82 solved the issue.

Strange. It has never worked for me, since I first noticed the issue prior to 1.83, and just tested with 1.83, and I still see the same error messages within the DEBUG CONSOLE of VS Code.

Nevertheless, still definitely needs to be fixed as far as I am concerned.

[tompetk]

Hmm, weird. Those errors(warnings?) didn't disappear on my side either, but it seems it was not the cause. It was mostly about breakpoints somehow not being triggered from VS Code in new version. Debugging in Chrome Dev Tools worked.

[Sayvai]

I never had / have an issue with debugging the Next.js frontend within the Chrome browsers' DevTools, as that always reliably worked for me.

My personal experience is an issue with debugging within the VS Code debugger.. 🤔

[DanubioBlu]

news about this bug?

[Apezdr]

Having this issue for server side code in my instance. Files under the directory /src/utils/ aren't being consistently picked up for debugging due to source mapping issues that I'm unaware of how to fix.

https://github.com/vercel/next.js/issues/24349#issuecomment-1982216716

[metalmarker]

Adding resolveSourceMapLocations setting to launch.json, to disable debugging for node_modules, as described in this answer solved the issue for me.