general.mdx

title	React Router Devtools General Configuration
description	General Configuration options for the React Router Devtools to interface with your editor

import Warn from "./warn.tsx";

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

General Config

type GeneralConfig = {
 	pluginDir?: string
	includeInProd?: {
		client?: boolean
		server?: boolean
	}

}

enhancedLogs

This configuration flag enables/disables enhanced logs feature.

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.

includeInProd

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

By default it is set to undefined and if you set this option to an object with the client, context and server properties set to true the plugin will be included in production builds.

The client part includes the dev tools with the plugin and the server part includes the info logs. You can granularly configure the exact behavior of both sides with client and server configs respectively.

Each of these flags will include a part of the plugin in production, in order for any of these to work react-router-devtools need to be switched over to a regular dependency and included in your project. If you only want to include the devTools helper in production, for example, you can set includeInProd to { devTools: true } and the devTools part will be included in production and available always.

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. Also the server part uses chalk which might not work in non-node environments!

Also, 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 }).

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

export default defineConfig({
  plugins: [
    reactRouterDevTools({
      includeInProd: {
        client: true,
        server: true,
        devTools: true
      },
    }),
  ],
});