Devtools vite plugin causes bug.

[Stybo]

TanStack Devtools version

V0.7.0

Framework/Library version

React V19.2.17

Describe the bug and the steps to reproduce it

I want to remove the devtools on build because it uses a lot of resources.

With devtools:

pnpm build
$ tsc -b && vp build
vite v8.0.16 building client environment for production...
transforming (2) src\main.tsx
[@tanstack/devtools-vite] Removed devtools code from: /src/providers/devtools-provider.tsx

✓ 3037 modules transformed.
✗ Build failed in 2.70s
error during build:
Build failed with 1 error:

[builtin:vite-transform] Unexpected token
╭─[ src/providers/devtools-provider.tsx:42:10 ]
│
42 │ t3 = ;
│ ┬
│ ╰──
────╯

This is the output wich is strange because my file does only have 22 lines.

Without devtools:

Your Minimal, Reproducible Example - (Sandbox Highly Recommended)

https://stackblitz.com/~/github.com/Stybo/devtools-bug

Screenshots or Videos (Optional)

devtools-provider.tsx

import { a11yDevtoolsPlugin } from "@tanstack/devtools-a11y/react";
import { TanStackDevtools } from "@tanstack/react-devtools";
import { FormDevtoolsPanel } from "@tanstack/react-form-devtools";
import { ReactQueryDevtoolsPanel } from "@tanstack/react-query-devtools";
import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools";
import { TableDevtoolsPanel } from "@tanstack/react-table-devtools";
import { queryClient } from "./query-provider.tsx";
import { router } from "./router-provider.tsx";

export const DevtoolsProvider = () => {
	return (
		<TanStackDevtools
			plugins={[
				{ name: "TanStack Query", render: <ReactQueryDevtoolsPanel client={queryClient} /> },
				{ name: "TanStack Router", render: <TanStackRouterDevtoolsPanel router={router} /> },
				{ name: "TanStack Form", render: <FormDevtoolsPanel /> },
				{ name: "TanStack Table", render: <TableDevtoolsPanel /> },
				a11yDevtoolsPlugin(),
			]}
		/>
	);
};

main.tsx

import { I18nProvider, ToastProvider } from "@heroui/react";
import "./globals.css";
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { AuthProvider } from "./providers/auth-provider.tsx";
import { DevtoolsProvider } from "./providers/devtools-provider.tsx";
import { QueryProvider } from "./providers/query-provider.tsx";
import { RouterProvider } from "./providers/router-provider.tsx";

const App = () => (
	<AuthProvider>
		<I18nProvider locale="nl-NL">
			<QueryProvider>
				<RouterProvider />
				<ToastProvider placement="bottom start" />
				<DevtoolsProvider />
			</QueryProvider>
		</I18nProvider>
	</AuthProvider>
);

const rootElement = document.getElementById("root") as HTMLElement;
if (!rootElement.innerHTML) {
	const root = createRoot(rootElement);
	root.render(
		<StrictMode>
			<App />
		</StrictMode>,
	);
}

When placing the TanstackDevtools function directly in the app function it does work wich is very strange i think:

import "./globals.css";
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { AuthProvider } from "./providers/auth-provider.tsx";
import { DevtoolsProvider } from "./providers/devtools-provider.tsx";
import {queryClient, QueryProvider} from "./providers/query-provider.tsx";
import {router, RouterProvider} from "./providers/router-provider.tsx";
import {ReactQueryDevtoolsPanel} from "@tanstack/react-query-devtools";
import {TanStackRouterDevtoolsPanel} from "@tanstack/react-router-devtools";
import {FormDevtoolsPanel} from "@tanstack/react-form-devtools";
import {TableDevtoolsPanel} from "@tanstack/react-table-devtools";
import {a11yDevtoolsPlugin} from "@tanstack/devtools-a11y/react";
import {TanStackDevtools} from "@tanstack/react-devtools";

const App = () => (
	<AuthProvider>
		<I18nProvider locale="nl-NL">
			<QueryProvider>
				<RouterProvider />
				<ToastProvider placement="bottom start" />
				<TanStackDevtools
					plugins={[
						{ name: "TanStack Query", render: <ReactQueryDevtoolsPanel client={queryClient} /> },
						{ name: "TanStack Router", render: <TanStackRouterDevtoolsPanel router={router} /> },
						{ name: "TanStack Form", render: <FormDevtoolsPanel /> },
						{ name: "TanStack Table", render: <TableDevtoolsPanel /> },
						a11yDevtoolsPlugin(),
					]}
				/>
			</QueryProvider>
		</I18nProvider>
	</AuthProvider>
);

const rootElement = document.getElementById("root") as HTMLElement;
if (!rootElement.innerHTML) {
	const root = createRoot(rootElement);
	root.render(
		<StrictMode>
			<App />
		</StrictMode>,
	);
}

If interested i do have a more robust stackTrace. Just clone the repo

Do you intend to try to help solve this bug with your own PR?

No, because I do not know how

Terms & Code of Conduct

• I agree to follow this project's Code of Conduct
• I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[volcie]

I had a similar issue, wrapping the devtools element in a fragment fixed it.

export function DevTools() {
  return (
    <> {/* <- add these */}
      <TanStackDevtools
        plugins={[
          {name: "....."}
        ]}
      />
    </> {/* <- add these */}
  );
}

[Stybo]

Thnx @volcie . This actually fixed it. Maybe the Tanstack Devtools team can fix this internally? I think this is not the expected behavior.