How to enable React Compiler in framework mode? reactRouter() plugin has no Babel escape hatch

[xiaohp]

What I'm trying to do Enable babel-plugin-react-compiler in a React Router v7 framework-mode app, the same way I would in a plain Vite + React app.

Context

With @vitejs/plugin-react it's documented and one-liner:

// vite.config.ts (plain Vite + React)
import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: [['babel-plugin-react-compiler', { target: '19' }]],
      },
    }),
  ],
})

The problem in framework mode

@react-router/dev's reactRouter() plugin does its own JSX/Fast-Refresh transformation and does not expose any option to inject a Babel plugin. The plugin's TypeScript signature is literally zero-arg:

// node_modules/@react-router/dev/dist/vite.d.ts
declare const reactRouterVitePlugin: () => Vite.Plugin[]
export { reactRouterVitePlugin as reactRouter, ... }

Internally the JSX transform is hard-coded:

// node_modules/@react-router/dev/dist/vite.js:4464
plugins: [[require("react-refresh/babel"), { skipEnvCheck: true }]],

No babel option, no reactCompiler field, no escape hatch.

What I've tried

1. Adding @vitejs/plugin-react alongside reactRouter(). Either React Refresh runs twice (errors out), or the order matters and it breaks HMR. Not viable without a docs-sanctioned configuration.
2. Looking for a documented option. reactRouter() accepts nothing. I read the source to confirm there's no internal hook.
3. Reading prior issues. There's already #13796 which was closed as a docs issue with no maintainer response — so this is still effectively unanswered.
4. Compatibility concern. #14885 showed React Compiler breaks RSC's use client boundary. That suggests the team has at least heard of users running the Compiler against framework mode, but there's no guidance.

Questions for the team

1. Is enabling babel-plugin-react-compiler officially supported in framework mode today? If not, is it on the roadmap?
2. If yes, what is the documented configuration? A babel option on reactRouter()? A separate plugin? A vite.config.ts optimizeDeps workaround?
3. If unsupported, is it tracked anywhere? reactRouter() is the only "blessed" path into framework mode, so without a way to configure it users are stuck choosing between React Router and React Compiler.

Proposed API (one option to consider)

If a config knob is on the table, something like this would close the gap without breaking existing setups:

reactRouter({
  babel: {
    plugins: [['babel-plugin-react-compiler', { target: '19' }]],
  },
})

Or, alternatively, document explicitly that users should compose @vitejs/plugin-react before reactRouter() (or after) with a specific ordering, and confirm the resulting HMR behavior is correct.

Happy to test either path on a real app and report back. Thanks!

[xiaohp]

it works，refer to https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md

import { reactRouter } from '@react-router/dev/vite'
import tailwindcss from '@tailwindcss/vite'
import { defineConfig } from 'vite'
import { reactCompilerPreset } from '@vitejs/plugin-react'
import babel from '@rolldown/plugin-babel'

export default defineConfig({
  plugins: [tailwindcss(), reactRouter(), babel({ presets: [reactCompilerPreset()] })],
  resolve: {
    tsconfigPaths: true,
  },
})

[DucMinhNe]

@xiaohp's snippet is the right shape, and it matches the official React Compiler install guide for Vite: run the compiler as a separate Babel pass via @rolldown/plugin-babel, alongside reactRouter() rather than @vitejs/plugin-react.

// vite.config.ts
import { reactRouter } from "@react-router/dev/vite";
import babel from "@rolldown/plugin-babel";
import { reactCompilerPreset } from "@vitejs/plugin-react";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    reactRouter(),
    babel({
      // only transform app source; node_modules is already excluded by default
      include: /\.[jt]sx?$/,
      presets: [reactCompilerPreset()],
    }),
  ],
});

npm i -D @rolldown/plugin-babel babel-plugin-react-compiler react-compiler-runtime

Why you don't (and shouldn't) add @vitejs/plugin-react

You already found that adding @vitejs/plugin-react makes React Refresh run twice. That's expected: reactRouter()'s plugin array includes its own react-router:react-refresh-babel transform that runs react-refresh/babel on every non-node_modules .[jt]sx?/.mdx? file during serve. So Fast Refresh is already handled by the framework plugin — there is nothing for @vitejs/plugin-react to add except a duplicate refresh pass and the JSX transform RR already does. That's why there's no babel/reactCompiler option on reactRouter(): the escape hatch is to add your own Babel plugin as a standalone Vite plugin, which is exactly what the React Compiler docs recommend for Vite.

@rolldown/plugin-babel is the package the React docs use, and it works as a Vite plugin (it documents Vite-specific configResolvedHook/applyToEnvironment behavior). It does not load babel.config.js/.babelrc — pass everything inline as above, which keeps it from interfering with RR's own Babel usage.

Notes / gotchas

• reactCompilerPreset() is exported by @vitejs/plugin-react v6+. If you're on an older @vitejs/plugin-react, just pass the plugin directly instead of the preset: babel({ plugins: ["babel-plugin-react-compiler"] }).
• React Compiler is stable as of babel-plugin-react-compiler@1.0.0; it targets React 19 by default and needs no extra config. On React 17/18 add react-compiler-runtime and set the target in the plugin options (["babel-plugin-react-compiler", { target: "18" }]) per the compiler config reference.
• Because the compiler only rewrites component/hook code, scoping the Babel pass to your app's .[jt]sx? files (and excluding node_modules, which is the plugin's default) keeps build times reasonable.

After adding it, you can verify the compiler is picking up your code with npx react-compiler-healthcheck, or check that components show the compiler badge ("Memo ✨") in React DevTools.