Non-zero runtime overhead in production build

[vasilii-kovalev]

TanStack Devtools version

v0.6.4

Framework/Library version

React v19.1.1

Describe the bug and the steps to reproduce it

After creating a production build, I can see a non-zero overhead from the devtools library and its plugins:

Since the devtools are available in development mode only, this overhead should not exist in the production build.

Actually, all devtools components add this overhead, not only TanStack Devtools, so let me know if I should create separate issues in the other libraries.

A workaround is to render the devtools components conditionally depending on the environment variable:

import {
  TanStackDevtools,
} from "@tanstack/react-devtools";
import {
  ReactQueryDevtoolsPanel,
} from "@tanstack/react-query-devtools";
import {
  TanStackRouterDevtoolsPanel,
} from "@tanstack/react-router-devtools";

<Fragment>
  {
    import.meta.env.DEV
      ? (
        <TanStackDevtools
          plugins={[
            {
              name: "TanStack Query",
              render: (
                <ReactQueryDevtoolsPanel
                  client={queryClient}
                />
              ),
            },
            {
              name: "TanStack Router",
              render: (
                <TanStackRouterDevtoolsPanel
                  router={router}
                />
              ),
            },
          ]}
        />
      )
      : null
  }
</Fragment>

Steps to reproduce:

1. Create a Vite (React + TypeScript) project
2. (Optional) Add TanStack Query and TanStack Router with devtools
3. Set up the devtools as written in the documentation
4. Make a production build
5. Analyze the production build (using Sonda, for example)

Your Minimal, Reproducible Example - (Sandbox Highly Recommended)

vasilii-kovalev/state-manager-examples@63b84aa

Screenshots or Videos (Optional)

No response

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

None

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.

[sprusak]

Hi, just from my perspective, this minimal footprint is basically just export of empty function. (not noticeable by most of the apps)

As you suggested to completely remove it from the bundle, some adjustments should be done on application side, but this could be rather some part of documentation as from lib perspective it is probably hard to reduce it more. For reference this is the index file https://github.com/TanStack/devtools/blob/main/packages/react-devtools/src/index.ts

[vasilii-kovalev]

@sprusak, thank you for the clarification!
In your opinion, does it make sense to mention the workaround in the documentation?

[AlemTuzlak]

Tbh I'm not sure if this can be easily done outside the bundler, I do have some ideas I want to explore like moving the logic to vite instead of the actual libs, tree-shaking it completely out and not using it at all indeed would require something like this on the user-side.

[vasilii-kovalev]

After updating to the latest versions of devtools-related packages, Sonda highlights the following issue on build:

[plugin @tanstack/devtools:remove-devtools-on-build] Sourcemap is likely to be incorrect: a plugin (@tanstack/devtools:remove-devtools-on-build) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help

main.tsx:

import {
  TanStackDevtools,
} from "@tanstack/react-devtools";
import {
  QueryClient,
  QueryClientProvider,
} from "@tanstack/react-query";
import {
  ReactQueryDevtoolsPanel,
} from "@tanstack/react-query-devtools";
import {
  createRouter,
  RouterProvider,
} from "@tanstack/react-router";
import {
  TanStackRouterDevtoolsPanel,
} from "@tanstack/react-router-devtools";
import {
  StrictMode,
} from "react";
import {
  createRoot,
} from "react-dom/client";

import {
  isNull,
} from "@/utilities/is-null";

import {
  routeTree,
} from "./routeTree.gen";

const router = createRouter({
  routeTree,
});

declare module "@tanstack/react-router" {
  interface Register {
    router: typeof router;
  }
}

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false,
    },
  },
});

const rootElement = document.getElementById("root");

if (!isNull(rootElement)) {
  const root = createRoot(rootElement);

  root.render(
    <StrictMode>
      <QueryClientProvider
        client={queryClient}
      >
        <RouterProvider
          router={router}
        />

        <TanStackDevtools
          plugins={[
            {
              name: "TanStack Query",
              render: <ReactQueryDevtoolsPanel/>,
            },
            {
              name: "TanStack Router",
              render: (
                <TanStackRouterDevtoolsPanel
                  router={router}
                />
              ),
            },
          ]}
        />
      </QueryClientProvider>
    </StrictMode>,
  );
}

vite.config.ts:

import {
  devtools,
} from "@tanstack/devtools-vite";
import {
  tanstackRouter,
} from "@tanstack/router-plugin/vite";
import react from "@vitejs/plugin-react";
import sonda from "sonda/vite";
import unoCSS from "unocss/vite";
import {
  defineConfig,
} from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

// https://vite.dev/config
const config = defineConfig({
  build: {
    // Required for Sonda.
    sourcemap: true,
  },
  plugins: [
    devtools(),
    tsconfigPaths({
      configNames: [
        "tsconfig.app.json",
      ],
    }),
    tanstackRouter({
      autoCodeSplitting: true,
      target: "react",
    }),
    react({
      babel: {
        plugins: [
          "babel-plugin-react-compiler",
        ],
      },
    }),
    unoCSS(),
    sonda(),
  ],
});

export default config;

The same with Solid setup.
It didn't happen before the update.
Repository for reproduction.

Is it a bug on devtools packages' side?

[AlemTuzlak]

@vasilii-kovalev no, it's a bug in start, if you try it with the latest alpha it goes away, although there are a few warnings in the latest alpha that are improvements that need to be made on my side which I'm actively working on

[AlemTuzlak]

@vasilii-kovalev this PR will bring true 0 production overhead and issues:
https://github.com/TanStack/devtools/pull/148/files

[vasilii-kovalev]

@vasilii-kovalev this PR will bring true 0 production overhead and issues: https://github.com/TanStack/devtools/pull/148/files

Sadly, still seeing the warning, and having broken sourcemaps after updating to the latest version after the fix.

[AlemTuzlak]

interesting, sourcemaps are generated by babel, not sure why it reports them as broken, i'll try to figure it out

[AlemTuzlak]

okay figured it out, will release a fix in next minor

[vasilii-kovalev]

After the latest update, devtools are indeed removed from production build, and the sourcemaps are correct. Thank you for your perseverance!