fix(devtools-vite): preserve valid syntax when removing devtools JSX

[vedant416]

🎯 Changes

Fixes #457

Issue Summary

• Devtools JSX (<TanStackDevtools />) was being fully removed without taking into account the context in which it was being used.
• This could lead to invalid syntax being left behind, which would break builds.
• Below is the example of bug:

// before removal
const devtools = <TanStackDevtools />

// after removal (broken)
const devtools =

Fix

• Devtools JSX nodes are now only fully removed when their parent is a JSXElement or JSXFragment.
• In every other context, the node is replaced with null instead, which is always valid as an expression.
• New changes preserve existing behavior and fix the above issue.
• All the existing testcases pass and I have also added testcases for the new behavior.
• Below are some examples of the new behavior:

// before removal:
const devtools0 = <div><TanStackDevtools /></div>
const devtools1 = <TanStackDevtools />
const devtools2 = functionCall(<TanStackDevtools />)
const devtools3 = true ? <TanStackDevtools /> : <>fallback</>
const devtools4 = {
  devtools: <TanStackDevtools />
}
const devtools5 = (<div>
    {<TanStackDevtools plugins={[]} />}
</div>)

// after removal:
const devtools0 = <div></div>
const devtools1 = null
const devtools2 = functionCall(null)
const devtools3 = true ? null : <>fallback</>
const devtools4 = {
  devtools: null
}
const devtools5 = (<div>
    {null}
</div>)

✅ Checklist

• I have followed the steps in the Contributing guide.
• I have tested this code locally with pnpm test:pr.

🚀 Release Impact

• This change affects published code, and I have generated a changeset.
• This change is docs/CI/dev-only (no release).

Summary by CodeRabbit

• Bug Fixes

  • Fixed devtools JSX/TSX removal to keep resulting code valid.
  • Replaced devtools expressions with null where needed (e.g., assignments, function arguments, conditionals, object properties, and nested expressions).
  • Preserved surrounding JSX content when removing devtools elements.

• Release

  • Recorded a patch release for the devtools bundler package.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 614a7e8b-edbf-4c31-8e37-b33dfdf9b8b4

📥 Commits

Reviewing files that changed from the base of the PR and between c78d6d4 and 09ca25b.

📒 Files selected for processing (1)

• packages/devtools-bundler-core/src/remove-devtools.ts

🚧 Files skipped from review as they are similar to previous changes (1)

• packages/devtools-bundler-core/src/remove-devtools.ts

---

📝 Walkthrough

Walkthrough

removeDevtools now removes devtools nodes nested in JSX while replacing nodes in other expression contexts with null. Tests cover parenthesized returns, multiple expression forms, and preservation of surrounding JSX. A patch changeset records the fix.

Changes

Devtools removal syntax fix

Layer / File(s)	Summary
Removal logic update packages/devtools-bundler-core/src/remove-devtools.ts	Removes devtools elements from JSX parents and replaces them with null in other expression contexts.
Test coverage and release entry packages/devtools-bundler-core/src/remove-devtools.test.ts, .changeset/happy-clubs-wave.md	Tests null replacement across expression forms, JSX child removal, and valid parenthesized returns; records a patch release.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related PRs

• TanStack/devtools#449: Updates related removeDevtools JSX-removal behavior and test coverage.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main fix: preserving valid syntax when removing devtools JSX.
Description check	✅ Passed	The description includes the required changes, checklist, and release impact sections with concrete details.
Linked Issues check	✅ Passed	The PR addresses #457 by replacing removed devtools with null outside JSX contexts and adding tests.
Out of Scope Changes check	✅ Passed	The changes are limited to the bug fix, tests, and required changeset, with no unrelated scope introduced.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[AlemTuzlak]

Rebased onto main to resolve the conflict. Since #484 merged, remove-devtools.ts moved from @tanstack/devtools-vite into the shared @tanstack/devtools-bundler-core, so your fix + tests now apply there (git tracked the rename cleanly). Also updated the changeset to target @tanstack/devtools-bundler-core (dependents like devtools-vite bump automatically). All 17 tests pass. Thanks for the fix!

[nx-cloud]

View your CI Pipeline Execution ↗ for commit c78d6d4

Command	Status	Duration	Result
nx run-many --target=test:e2e --parallel=1 --pr...	✅ Succeeded	1m 6s	View ↗
nx affected --targets=test:eslint,test:sherif,t...	✅ Succeeded	58s	View ↗
nx run-many --targets=build --exclude=examples/...	✅ Succeeded	10s	View ↗

---

☁️ Nx Cloud last updated this comment at 2026-07-22 12:46:57 UTC

[pkg-pr-new]

More templates

• @tanstack/devtools-example-angular-a11y-devtools
• @tanstack/devtools-example-angular-basic
• @tanstack/devtools-example-angular-panel
• ssr
• @tanstack/devtools-example-angular-with-devtools
• @tanstack/devtools-example-preact-basic
• @tanstack/devtools-custom-devtools-preact
• @tanstack/react-devtools-a11y-example
• @tanstack/devtools-example-react-basic
• start-repro
• @tanstack/devtools-custom-devtools
• tanstack-start-example-counter
• @tanstack/devtools-example-react-https
• start
• start-cloudflare
• start-nitro
• @tanstack/devtools-example-react-time-travel
• @tanstack/solid-devtools-a11y-example
• @tanstack/devtools-example-solid-basic
• @tanstack/devtools-example-devtools-ui
• @tanstack/devtools-example-solid-start
• @tanstack/query-example-vue-basic

@tanstack/angular-devtools

npm i https://pkg.pr.new/@tanstack/angular-devtools@480

@tanstack/devtools

npm i https://pkg.pr.new/@tanstack/devtools@480

@tanstack/devtools-a11y

npm i https://pkg.pr.new/@tanstack/devtools-a11y@480

@tanstack/devtools-bundler-core

npm i https://pkg.pr.new/@tanstack/devtools-bundler-core@480

@tanstack/devtools-client

npm i https://pkg.pr.new/@tanstack/devtools-client@480

@tanstack/devtools-rspack

npm i https://pkg.pr.new/@tanstack/devtools-rspack@480

@tanstack/devtools-ui

npm i https://pkg.pr.new/@tanstack/devtools-ui@480

@tanstack/devtools-utils

npm i https://pkg.pr.new/@tanstack/devtools-utils@480

@tanstack/devtools-vite

npm i https://pkg.pr.new/@tanstack/devtools-vite@480

@tanstack/devtools-event-bus

npm i https://pkg.pr.new/@tanstack/devtools-event-bus@480

@tanstack/devtools-event-client

npm i https://pkg.pr.new/@tanstack/devtools-event-client@480

@tanstack/preact-devtools

npm i https://pkg.pr.new/@tanstack/preact-devtools@480

@tanstack/react-devtools

npm i https://pkg.pr.new/@tanstack/react-devtools@480

@tanstack/solid-devtools

npm i https://pkg.pr.new/@tanstack/solid-devtools@480

@tanstack/svelte-devtools

npm i https://pkg.pr.new/@tanstack/svelte-devtools@480

@tanstack/vue-devtools

npm i https://pkg.pr.new/@tanstack/vue-devtools@480

commit: 09ca25b