03-general.mdx

title	React Router Devtools General Configuration
summary	General configuration covers plugin directory setup, TanStack DevTools integration, and controlling whether client or server parts of React Router Devtools are included in production.
description	General Configuration options for the React Router Devtools

This covers the general configuration options for the React Router Devtools.

General Config Type

type ReactRouterViteConfig = {
  client?: Partial<RdtClientConfig>
  server?: DevToolsServerConfig
  pluginDir?: string
  includeInProd?: {
    client?: boolean
    server?: boolean
    devTools?: boolean
  }
  tanstackConfig?: Omit<Partial<TanStackDevtoolsConfig>, "customTrigger">
  tanstackClientBusConfig?: Partial<ClientEventBusConfig>
  tanstackViteConfig?: TanStackDevtoolsViteConfig
  experimental_codegen?: {
    enabled: boolean
  }
}

You can find more info on TanStack specific configuration options here: https://tanstack.com/devtools/latest/docs/overview

pluginDir

The relative path to your plugin directory. If you have a directory for react-router-devtools plugins you can point to it and they will be automatically imported and added to the dev tools.

Example:

import { reactRouterDevTools } from "react-router-devtools";

export default defineConfig({
  plugins: [
    reactRouterDevTools({
      pluginDir: "./plugins"
    }),
    reactRouter(),
  ],
});

includeInProd

This option is used to set whether parts of the plugin should be included in production builds or not.

By default, all parts are excluded from production builds. You can selectively include different parts:

• client: Include the devtools UI in production
• server: Include server-side logging and utilities in production
• devTools: Include TanStack DevTools integration in production

includeInProd?: {
  client?: boolean    // Default: false
  server?: boolean    // Default: false
  devTools?: boolean  // Default: false
}

Example:

import { reactRouterDevTools } from "react-router-devtools";

export default defineConfig({
  plugins: [
    reactRouterDevTools({
      includeInProd: {
        client: false,
        server: true,  // Include server logs in production
        devTools: false
      },
    }),
    reactRouter(),
  ],
});

You can also control this behavior using environment variables.

Again, you can selectively include different parts:

• VITE_INCLUDE_CLIENT_IN_PROD=true: Include the devtools UI in production
• VITE_INCLUDE_SERVER_IN_PROD=true: Include server-side logging and utilities in production
• VITE_INCLUDE_DEVTOOLS_IN_PROD=true: Include TanStack DevTools integration in production

Example:

# VITE_INCLUDE_CLIENT_IN_PROD=true
VITE_INCLUDE_SERVER_IN_PROD=true # Include server logs in production
VITE_INCLUDE_DEVTOOLS_IN_PROD=false

If you decide to deploy parts to production you should be very careful that you don't expose the dev tools to your clients or anybody who is not supposed to see them.

Important notes:

• The server part uses chalk which might not work in non-node environments
• If you wish to edit the plugin server config in production, you can set process.rdt_config to an object with the same shape as the config object and it will be used instead of the default production config ({ silent: true })
• Consider adding authentication/authorization checks before exposing devtools in production

TanStack DevTools Integration

React Router Devtools v6+ integrates with TanStack DevTools, providing enhanced debugging capabilities. You can configure TanStack-specific behavior through these options:

tanstackConfig

Configure the TanStack DevTools behavior and appearance.

tanstackConfig?: Omit<Partial<TanStackDevtoolsConfig>, "customTrigger">

The `customTrigger` option is automatically managed by React Router Devtools and cannot be configured manually.

All the options are available here: https://tanstack.com/devtools/latest/docs/configuration

Common options:

import { reactRouterDevTools } from "react-router-devtools";

export default defineConfig({
  plugins: [
    reactRouterDevTools({
      tanstackConfig: {
        position: "bottom-right",        // Position of the devtools trigger
        // Add other TanStack config options as needed
      }
    }),
    reactRouter(),
  ],
});

tanstackClientBusConfig

Configure the TanStack client event bus for advanced use cases.

tanstackClientBusConfig?: Partial<ClientEventBusConfig>

This is an advanced option for customizing how TanStack DevTools communicates between client and server. Most users won't need to configure this.

Example:

import { reactRouterDevTools } from "react-router-devtools";

export default defineConfig({
  plugins: [
    reactRouterDevTools({
      tanstackClientBusConfig: {
        // Advanced event bus configuration
      }
    }),
    reactRouter(),
  ],
});

tanstackViteConfig

Configure the TanStack Vite plugin directly for advanced scenarios.

tanstackViteConfig?: TanStackDevtoolsViteConfig

This allows you to pass configuration directly to the underlying TanStack DevTools Vite plugin.

Example:

import { reactRouterDevTools } from "react-router-devtools";

export default defineConfig({
  plugins: [
    reactRouterDevTools({
      tanstackViteConfig: {
        // TanStack Vite plugin configuration
      }
    }),
    reactRouter(),
  ],
});

You can find more info on TanStack specific configuration options here: https://tanstack.com/devtools/latest/docs/plugin-configuration

Experimental Codegen

The experimental_codegen option enables automatic type annotation generation for your React Router route exports. When enabled, the plugin will automatically add type annotations to your route exports (loader, action, default component, etc.) when files are created or modified.

experimental_codegen?: {
  enabled: boolean  // Default: false
}

What it does

When you create or edit a route file, the plugin will automatically:

1. Add the Route type import from ./+types/{filename}
2. Add type annotations to exported functions like loader, action, clientLoader, clientAction, meta, links, headers, ErrorBoundary, and HydrateFallback
3. Add type annotations to the default exported component
4. Add type annotations to middleware and clientMiddleware array exports

Example

Before (what you write):

export const loader = ({ request }) => {
  return { data: "hello" }
}

export const middleware = []

export default function MyRoute({ loaderData }) {
  return <div>{loaderData.data}</div>
}

After (automatically transformed):

import type { Route } from "./+types/my-route";

export const loader = ({ request }: Route.LoaderArgs) => {
  return { data: "hello" }
}

export const middleware: Route.MiddlewareFunction[] = []

export default function MyRoute({ loaderData }: Route.ComponentProps) {
  return <div>{loaderData.data}</div>
}

Configuration

To enable this feature, add the experimental_codegen option to your config:

import { reactRouterDevTools } from "react-router-devtools";

export default defineConfig({
  plugins: [
    reactRouterDevTools({
      experimental_codegen: {
        enabled: true
      }
    }),
    reactRouter(),
  ],
});

This feature is experimental and may change in future versions. It modifies your source files directly, so make sure you have version control in place before enabling it.

Notes:

• Only functions with parameters will have types added (functions with no parameters are skipped)
• Exports that already have type annotations are skipped
• The type import path follows React Router v7 conventions: ./+types/{filename}

Complete Configuration Example

Here's a complete example showing all general configuration options:

import { defineConfig } from 'vite'
import { reactRouter } from '@react-router/dev/vite'
import { reactRouterDevTools, defineRdtConfig } from "react-router-devtools"

const rdtConfig = defineRdtConfig({
  // Client configuration
  client: {
    expansionLevel: 2,
    routeBoundaryGradient: "gotham",
  },

  // Server configuration
  server: {
    silent: false,
    logs: {
      loaders: true,
      actions: true,
    }
  },

  // Plugin directory
  pluginDir: "./plugins",

  // Production inclusion
  includeInProd: {
    client: false,
    server: true,
    devTools: false,
  },

  // TanStack DevTools configuration
  tanstackConfig: {
    position: "bottom-right",
    buttonPosition: "bottom-right",
  },

  // TanStack client bus configuration (advanced)
  tanstackClientBusConfig: {
    // Custom event bus config if needed
  },

  // TanStack Vite plugin configuration (advanced)
  tanstackViteConfig: {
    // Custom Vite plugin config if needed
  },

  // Experimental codegen for automatic type annotations
  experimental_codegen: {
    enabled: true
  }
})

export default defineConfig({
  plugins: [
    reactRouterDevTools(rdtConfig),
    reactRouter(),
  ],
})

Using defineRdtConfig

The defineRdtConfig helper provides type safety for your configuration:

import { defineRdtConfig } from "react-router-devtools"

const config = defineRdtConfig({
  // Your configuration with full TypeScript support
  client: {
    expansionLevel: 2,
  },
  tanstackConfig: {
    position: "bottom-right",
  }
})

export default config

You can then import and use this configuration in your vite.config.ts:

import { reactRouterDevTools } from "react-router-devtools"
import rdtConfig from "./rdt.config"

export default defineConfig({
  plugins: [
    reactRouterDevTools(rdtConfig),
    reactRouter(),
  ],
})