TanStack Devtools version
0.7.0
Framework/Library version
react
Describe the bug and the steps to reproduce it
Bug Report
Describe the bug
After upgrading @tanstack/devtools-vite from 0.6.0 to 0.7.0, the production build fails. The plugin successfully detects and removes devtools code, but the transform leaves behind return (); — an empty parenthesized expression — which is a syntax error that rolldown rejects.
Steps to Reproduce
- Upgrade
@tanstack/devtools-vite from 0.6.0 → 0.7.0
- Have a component where the entire return value is devtools content:
// src/lib/devtools/devtools.provider.tsx
import { TanStackDevtools } from "@tanstack/react-devtools";
import { FormDevtoolsPanel } from "@tanstack/react-form-devtools";
import { ReactQueryDevtoolsPanel } from "@tanstack/react-query-devtools";
export function DevtoolsProvider() {
return (
<TanStackDevtools
plugins={[
{
name: "TanStack Query",
render: <ReactQueryDevtoolsPanel />,
},
{
name: "TanStack Form",
render: <FormDevtoolsPanel />,
},
]}
/>
);
}
- Run
vite build
Expected Behavior
Build succeeds. When the entire return expression is stripped, the transform should produce valid syntax — e.g. return null;.
Actual Behavior
The plugin removes the JSX but leaves the return ( and ); tokens intact, producing:
export function DevtoolsProvider() {
return (
); // ← invalid empty parenthesized expression
}
Which causes the build to fail:
[@tanstack/devtools-vite] Removed devtools code from: /src/lib/devtools/devtools.provider.tsx
✗ Build failed in 708ms
error during build:
Build failed with 1 error:
[builtin:vite-transform] Empty parenthesized expression
╭─[ src/lib/devtools/devtools.provider.tsx:3:10 ]
│
3 │ ╭─▶ return (
4 │ ├─▶ );
│ │
│ ╰──────────────
───╯
Environment
|
Version |
@tanstack/devtools-vite |
0.7.0 (regression from 0.6.0) |
vite |
8.0.13 |
| OS |
Windows |
Workaround
Pin back to @tanstack/devtools-vite@0.6.0, or wrap the return in a fragment so stripping the devtools node still leaves valid syntax:
export function DevtoolsProvider() {
return (
<>
<TanStackDevtools
plugins={[
{
name: "TanStack Query",
render: <ReactQueryDevtoolsPanel />,
},
{
name: "TanStack Form",
render: <FormDevtoolsPanel />,
},
]}
/>
</>
);
}
(Though this workaround shouldn't be necessary.)
Root Cause (suspected)
The code removal transform in 0.7.0 strips the JSX node inside return (...) but does not remove or replace the surrounding return ( ... ) wrapper. When the stripped node was the only child, this leaves return (); which is syntactically invalid. The fix should replace the emptied return with return null;.
Your Minimal, Reproducible Example - (Sandbox Highly Recommended)
https://stackblitz.com/edit/vitejs-vite-rug5ebyz?file=src%2Fmain.tsx
Screenshots or Videos (Optional)
Do you intend to try to help solve this bug with your own PR?
None
Terms & Code of Conduct
TanStack Devtools version
0.7.0
Framework/Library version
react
Describe the bug and the steps to reproduce it
Bug Report
Describe the bug
After upgrading
@tanstack/devtools-vitefrom0.6.0to0.7.0, the production build fails. The plugin successfully detects and removes devtools code, but the transform leaves behindreturn ();— an empty parenthesized expression — which is a syntax error that rolldown rejects.Steps to Reproduce
@tanstack/devtools-vitefrom0.6.0→0.7.0vite buildExpected Behavior
Build succeeds. When the entire return expression is stripped, the transform should produce valid syntax — e.g.
return null;.Actual Behavior
The plugin removes the JSX but leaves the
return (and);tokens intact, producing:Which causes the build to fail:
Environment
@tanstack/devtools-vite0.7.0(regression from0.6.0)vite8.0.13Workaround
Pin back to
@tanstack/devtools-vite@0.6.0, or wrap the return in a fragment so stripping the devtools node still leaves valid syntax:(Though this workaround shouldn't be necessary.)
Root Cause (suspected)
The code removal transform in
0.7.0strips the JSX node insidereturn (...)but does not remove or replace the surroundingreturn ( ... )wrapper. When the stripped node was the only child, this leavesreturn ();which is syntactically invalid. The fix should replace the emptied return withreturn null;.Your Minimal, Reproducible Example - (Sandbox Highly Recommended)
https://stackblitz.com/edit/vitejs-vite-rug5ebyz?file=src%2Fmain.tsx
Screenshots or Videos (Optional)
Do you intend to try to help solve this bug with your own PR?
None
Terms & Code of Conduct