TanStack / TanStack/router

Bug: Breakpoints fail to attach in VSCode when `autoCodeSplitting` is enabled

Open
#6,667 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
15.1k
Forks
1.9k
Avg merge
1d 20h
Merged PRs (30d)
143

Description

Which project does this relate to?

Router

Describe the bug

When using @tanstack/router-plugin (Vite) with autoCodeSplitting: true, VSCode's debugger is unable to attach breakpoints to .tsx files within the routes directory.

The breakpoints appear as "Unbound breakpoint" (gray hollow circles) when the debug session starts. If I set autoCodeSplitting: false, the breakpoints work perfectly.

I am unsure whether debugging with breakpoints is expected to be supported when autoCodeSplitting is enabled. However, if it is intended to work, the current transformation seems to break the source map mapping in VSCode.

Your Example Website or App

https://github.com/pillarcoin/tanstack-router-demo

Steps to Reproduce the Bug or Issue
  1. Open the project in VS Code.
  2. Run pnpm run dev and launch the "debug client-side" task from launch.json.
  3. Set a breakpoint at line 9 of src/routes/about.tsx.
  4. In the browser, click the "About" link.
Expected behavior

Breakpoints should be correctly mapped to the original source files even when code splitting transformation is applied by the plugin.

Screenshots or Videos
Image
Platform
  • Router / Start Version: 1.160.0
  • OS: macOS
  • Browser: Chrome
  • Browser 145.0.7632.76
  • Bundler: Vite
  • Bundler Version: 7.3.1

  • Node.js Version: v24.13.1
  • pnpm Version: 10.29.3
Additional context

No response

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

Reproduce the issue from the linked demo using pnpm run dev, the debug client-side task in launch.json, and the breakpoint in src/routes/about.tsx. Start by tracing the @tanstack/router-plugin autoCodeSplitting transformation and its generated source maps. Done means the breakpoint binds and is hit in the original .tsx file with code splitting enabled.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript, vite, vscode
Domain
build-system, developer-experience, devtools
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.