vercel / vercel/next.js

Debugger not binding breakpoints in VSCode in server components, using official Next.js debugger setup

Open
#62,008 88 comments 48 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
JavaScript
Stars
142k
Forks
32.4k
Avg merge
2d 14h
Merged PRs (30d)
351

Description

Link to the code that reproduces this issue

https://github.com/andrewmartin/nextjs-example

To Reproduce
  1. Open the code in VSCode
  2. Add a breakpoint in any server side files
  3. Open the "Run and Debug" panel
  4. Select "Next.js: debug full stack" and press "F5" or the play button
  5. Note that breakpoints don't land when requests are made in either scenario.

Breakpoints set in server components that aren't attached (sorry the screencaps below didn't show my mouse hover so here's a gif):

Zight Recording 2024-02-13 at 09 45 03 AM

page tsx — tmp2 2024-02-13 at 9 36 58 AM
route ts — tmp2 2024-02-13 at 9 38 08 AM

Debug diagnostics:

Debug Diagnostics — tmp2 2024-02-13 at 9 39 02 AM

Some of the sources loaded (I can provide more if needed):

Debug Diagnostics — tmp2 2024-02-13 at 9 39 53 AM

Current vs. Expected behavior

Hi everyone! The code repo shared is a brand new, blank create-next-app using Typescript, Next 14, and the app directory. I only added the debugging setup from the official docs and a single basic API endpoint at /api/health and that's it. For some reason I cannot for the life of me get my breakpoints to attach.

Well, that's partially true, The only breakpoints that seem to be mapped with my codebase are those in the Browser / client side components. I have tried SO many things to get this to work and have read probably about 30 posts about trying to fix this.

I'd love to know if anyone has any ideas why a vanilla Next.js project might not find my sources. Thanks in advance for your help!

Provide environment information
Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.3.0: Wed Dec 20 21:30:44 PST 2023; root:xnu-10002.81.5~7/RELEASE_ARM64_T6000
Binaries:
  Node: 20.11.0
  npm: 10.2.4
  Yarn: 1.22.21
  pnpm: N/A
Relevant Packages:
  next: 14.1.0
  eslint-config-next: 14.1.0
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.3
Next.js Config:
  output: N/A
Which area(s) are affected? (Select all that apply)

Not sure

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

next dev (local)

Additional context

I have tried:

  • Using blank (vanilla) VSCode insiders
  • Using alternative node versions (node 18, other minor node 20)
  • Tried mucking around with the launch config a bit, like adjusting sourceMapPathOverrides etc

Some of my colleagues have had luck seeing them, others have not.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the reproduction repository at https://github.com/andrewmartin/nextjs-example and the official VSCode "Next.js: debug full stack" setup. Run the app with breakpoints in server components and the /api/health endpoint, then inspect the launch configuration and reported source mappings. Done means server-side breakpoints bind and pause when requests are made.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, next.js, react, typescript, vscode
Domain
backend, devtools, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.