CODEWITHSUNDEEP
node.jsdebuggingvisual-studio-codenext.js
remjx
remjx

Reputation: 4592

"Could not read source map" errors when connecting to Node debugger (Next.js)

I'm following the Next.js debugging docs to set up my local debugging environment.

"Step 1: Start Next.js in debug mode" is working fine:

> cross-env NODE_OPTIONS='--inspect' next dev

Debugger listening on ws://127.0.0.1:9229/e4bb955d-e3b2-4849-b6e7-0248e6a3d53e
For help, see: https://nodejs.org/en/docs/inspector
Loaded env from C:\Users\markj\workspace\my-app\.env.local
ready - started server on http://localhost:3000
info  - Using external babel configuration from C:\Users\markj\workspace\my-app\babel.config.js
event - compiled successfully

But on "Step 2: Connect to the debugger" I get these errors in VSCode Debug Console:

Could not read source map for file:///C:/Users/markj/workspace/my-app/node_modules/next/dist/compiled/path-to-regexp/index.js: ENOENT: no such file or directory, open 'c:\Users\markj\workspace\my-app\node_modules\next\dist\compiled\path-to-regexp\index.js.map'
Could not read source map for file:///C:/Users/markj/workspace/my-app/node_modules/@next/react-refresh-utils/ReactRefreshWebpackPlugin.js: ENOENT: no such file or directory, open 'c:\Users\markj\workspace\my-app\node_modules\@next\react-refresh-utils\ReactRefreshWebpackPlugin.js.map'
Could not read source map for file:///C:/Users/markj/workspace/my-app/node_modules/typescript/lib/typescript.js: ENOENT: no such file or directory, open 'c:\Users\markj\workspace\my-app\node_modules\typescript\lib\typescript.js.map'
Could not read source map for file:///C:/Users/markj/workspace/my-app/node_modules/@next/react-refresh-utils/loader.js: ENOENT: no such file or directory, open 'c:\Users\markj\workspace\my-app\node_modules\@next\react-refresh-utils\loader.js.map'
Could not read source map for file:///C:/Users/markj/workspace/my-app/node_modules/@next/react-refresh-utils/internal/ReactRefreshModule.runtime.js: ENOENT: no such file or directory, open 'c:\Users\markj\workspace\my-app\node_modules\@next\react-refresh-utils\internal\ReactRefreshModule.runtime.js.map'

Unsurprisingly with these errors when I try to attach breakpoints it says "Unbound breakpoint".

Environment:

Any help or ideas are much appreciated!

Upvotes: 15

Views: 13175

Answers (1)

Liam
Liam

Reputation: 29694

This is essentially caused by VSCode debugging files it shouldn't try and debug, i.e. node_modules. There are a few github issues on this, here and here. That I found useful. Essentially the fix is to stop VSCode from caring about these files and you do this by setting "type":"pwa-node" and add:

"resolveSourceMapLocations": [
    "${workspaceFolder}/",
    "!/node_modules/**"
],

To your launch.json under .vscode

Upvotes: 23

Related Questions