Render TanStack DevTools only in development mode

Problem

Problem

The root route currently renders TanStackDevtools unconditionally in apps/web/src/routes/__root.tsx.

Since TanStack DevTools are primarily intended for development and debugging, rendering them in production is unnecessary and may introduce avoidable overhead.

Although the DevTools UI is typically inactive in production, conditionally rendering the component would better align with the intended usage and keep production builds focused on end users.

Solution

Proposed Solution

Render TanStackDevtools only when running in development mode by wrapping it with Vite's development flag.

Example:

{import.meta.env.DEV && (
  <TanStackDevtools
    config={{
      position: 'bottom-right',
    }}
    plugins={[
      {
        name: 'Tanstack Router',
        render: <TanStackRouterDevtoolsPanel />,
      },
    ]}
  />
)}

This change would:

• Render DevTools only during development.
• Keep production output cleaner.
• Preserve the current development experience.
• Require only a small, backward-compatible code change.

Alternative

Alternatives Considered

An alternative would be to keep the current behavior since the DevTools are not actively used by end users.

Another option would be to introduce a configuration flag to explicitly enable or disable DevTools, but using import.meta.env.DEV is simpler and follows common Vite practices.

Anything else?

This would be a small refactoring with no functional changes to the application itself.

I'd be happy to work on this change and submit a pull request if the maintainers agree that it aligns with the project's goals.

Open apps/web/src/routes/__root.tsx and locate the unconditional TanStackDevtools render. Use Vite's development flag as described, then verify that the DevTools remain available in development while production output does not render them.