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

andyvanosdale commented 4 months ago

Link to the code that reproduces this issue

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

To Reproduce

run npx create-next-app
Start the VS Code debugger running the npm script dev
Navigate to the Debug Console tab in VS Code
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 commented 4 months ago

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 commented 3 months ago

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 commented 2 months ago

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 commented 1 month ago

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 commented 3 weeks ago

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!

vercel / next.js