vercel
Missing *.js.map files when debugging
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
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(?) 🙏
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.
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?
In my case issue turned out to be VS Code version 1.83. Reverting back to 1.82 solved the issue.
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.
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.
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.. 🤔
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
Adding resolveSourceMapLocations setting to launch.json, to disable debugging for node_modules, as described in this answer solved the issue for me.
Whilst I could attach breakpoints (with missing link.js.map) the code presented in debugger was off.
It turned out the .tsconfig was missing "sourceMap": true
I used the default create-app script and don't recall removing this so there may be a missing setting in there.
The link.js.map is still missing though.
Having trouble with this issue - tried all of the solutions suggested here (resolveSourceMapLocations, sourceMap, webRoot). Seems Chrome just freezes on various events (uncaught exception and more random events I still haven't succeeded to correlate) - horrible dev experience
