Debugger not binding breakpoints in VSCode in server components, using official Next.js debugger setup
Nobody has claimed this yet.
- 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
- Open the code in
VSCode - Add a breakpoint in any server side files
- Open the "Run and Debug" panel
- Select "Next.js: debug full stack" and press "F5" or the play button
- 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):
Debug diagnostics:
Some of the sources loaded (I can provide more if needed):
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
sourceMapPathOverridesetc
Some of my colleagues have had luck seeing them, others have not.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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