Next.js v14.2 creates source map issues with various components in VS Code debugger

[andyvanosdale]

Link to the code that reproduces this issue

https://github.com/andyvanosdale/nextjs-vscode-debug-read-source-map-issue

To Reproduce

1. run npx create-next-app
2. Start the VS Code debugger running the npm script dev
3. Navigate to the Debug Console tab in VS Code
4. Load the home page in a browser

Current vs. Expected behavior

Current behavior: VS Code's Debug Console shows this error:

Could not read source map for file:///Users/oz/src/github.com/andyvanosdale/nextjs-vscode-debug-read-source-map-issue/.next/server/vendor-chunks/next.js: ENOENT: no such file or directory, open '/Users/oz/src/github.com/andyvanosdale/nextjs-vscode-debug-read-source-map-issue/.next/server/vendor-chunks/render-from-template-context.js.map'

This also occurs with:

• link.js.map
• image-component.map

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.5.0: Wed May  1 20:14:38 PDT 2024; root:xnu-10063.121.3~5/RELEASE_ARM64_T6020
  Available memory (MB): 65536
  Available CPU cores: 12
Binaries:
  Node: 20.12.2
  npm: 10.5.0
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.3.0-canary.63 // Latest available version is detected (14.3.0-canary.63).
  eslint-config-next: N/A
  react: 19.0.0-beta-4508873393-20240430
  react-dom: 19.0.0-beta-4508873393-20240430
  typescript: 5.1.3
Next.js Config:
  output: N/A

VS Code:
Version: 1.89.1 (Universal)
Commit: dc96b837cf6bb4af9cd736aa3af08cf8279f7685
Date: 2024-05-07T05:14:24.611Z
Electron: 28.2.8
ElectronBuildId: 27744544
Chromium: 120.0.6099.291
Node.js: 18.18.2
V8: 12.0.267.19-electron.0
OS: Darwin arm64 23.5.0

Which area(s) are affected? (Select all that apply)

Developer Experience

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

No response

[M-Brico]

I thought this might be a mono-repo causing issue but only realised late in the day that it was the components. Page and layout debug fine with breakpoints stopping the flow.

[pedrowase]

Have you found a solution for this?

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

[tom-sherman]

I had this issue, couldn't attach any breakpoints and had a warning about link.js.map not found with next dev. That warning went away and I could attach a breakpoint with next dev --turbo

[jearthman]

For me this was happening when trying to debug a serverless function with port forwarding to shopify using ngrok. I realized I stupidly didn't include the path after the forwarding url, '/api/shopify-sync', when adding the forwarding url to my shopify config. Once I added the actual path for the function breakpoints worked fine.

[kentelmer]

any update on a solution to this?

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

[moltco]

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.

[angeljoel740604]

This works for me in VS Code: Version: 1.93.0 Commit: 4849ca9bdf9666755eb463db297b69e5385090e3 Date: 2024-09-04T13:02:38.431Z Electron: 30.4.0 ElectronBuildId: 10073054 Chromium: 124.0.6367.243 Node.js: 20.15.1 V8: 12.4.254.20-electron.0 OS: Windows_NT x64 10.0.22631

Add this to next.config.js:

    webpack: (config, { dev, isServer }) => {
        if (dev) {
          config.devtool = 'eval-source-map'
        }
        return config
      },

next.config.js 'use strict'

const nextConfig = { basePath: process.env.BASEPATH, redirects: async () => { return [ // ... rules ] }, webpack: (config, { dev, isServer }) => { if (dev) { config.devtool = 'eval-source-map' } return config } }

module.exports = nextConfig

Add this to launch.json:

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

launch.json:

{ "version": "0.2.0", "configurations": [ { "type": "node", "request": "launch", "name": "Next.js: Node", "runtimeExecutable": "npm", "runtimeArgs": ["run", "dev"], "console": "integratedTerminal", "restart": true, "env": { "NODE_OPTIONS": "--inspect" }, "cwd": "${workspaceFolder}", "resolveSourceMapLocations": [ "${workspaceFolder}/", "!/node_modules/", "!/.next/" ], "skipFiles": ["/", "node_modules/", "/.next/**"] }, // ... others ] }

REMOVE .next Try