Run React Compiler natively in framework mode

[nikolailehbrink]

Framework mode has no supported way to run React Compiler, and the new native path (Oxc's Rust port) only ships inside @vitejs/plugin-react, which framework mode replaces. Apps end up hand-writing a transform plugin or adding a Babel pass that the native compiler was meant to remove.

Problem

• @vitejs/plugin-react 6.1 runs React Compiler natively with react({ compiler: true }), through oxc-transform-react. Framework mode uses reactRouter() instead of @vitejs/plugin-react, and adding both runs Fast Refresh twice (react router framework conflict with @vitejs/plugin-react #12870, How to enable React Compiler in framework mode? reactRouter() plugin has no Babel escape hatch #15180).
• reactRouter() takes no option for the compiler. The react.dev install guide points React Router users to vite-plugin-babel with babel-plugin-react-compiler, the slower path the native compiler replaces; [Docs]: React Compiler - Vite #13796 asked for docs and was closed.
• What works today is a custom enforce: "pre" plugin that calls oxc-transform-react with jsx: "preserve" on client modules and leaves JSX and Fast Refresh to reactRouter(). It relies on plugin order and on how reactRouter() handles route modules and route chunks, neither of which is documented, so it can break on any release.

Proposal

Support the compiler in reactRouter() itself, for example reactRouter({ reactCompiler: true | ReactCompilerOptions }), which would:

• run oxc-transform-react (an optional peer dependency, as in @vitejs/plugin-react) on client modules before the Fast Refresh transform, including route modules and their split chunks;
• report fatal compiler errors as build errors and pass React Compiler options through.

If that is out of scope, documenting the supported plugin order for a separate compiler pass would already help.

Versions

• React Router 8.5 (@react-router/dev 8.5.1), React 19.3
• Vite 8, @vitejs/plugin-react 6.1.2, oxc-transform-react 0.156.0

Related: #15180, #13796, #12870

[fringe4life]

I know this is a little different to what you propose but you can use the native rust react compiler with react router framework mode right now.

https://blog.master.dev/react-now-rusted-all-the-way-out/
https://npmx.dev/package/@acusti/vite-plugin-react-compiler

I actually implemented this in a learning/portfolio site: fringe4life/van-life#162 and it's pretty straight forward.

Hope this helps if you want to use the native rust version for now!

[nikolailehbrink]

Hey, I know that it is possible and I have my own custom vite plugin for it, but it would be nice to have it natively.
Thanks for the heads up though 🙂

[fringe4life]

Hi, yes I know it wasn't perfectly what you were after, but for others this may still be helpful. Maybe for react router v9 they could use the vite plugin as for the rsc version they are using the vite rsc plugin. 🤷‍♂️

And then as you propose you could then pass in the compiler options.

[fringe4life]

Just for completeness but this could also be a very interesting option: https://alchemy.run/cloudflare/frontend/react-router/

[fringe4life]

plugins: [
    // React Router owns JSX/HMR — do not add @vitejs/plugin-react's react()
    reactRouter(),
    reactCompiler({
      compiler: { panicThreshold: "critical_errors", reportDiagnostics: true },
    }),
  ],

this is a simplified version of my vite config using the acusti version.