Issue with react compiler / babel

[AndreiTS]

I just updated to Vite 8 and @vitejs/plugin-react 6, and I'm getting an error when trying to run react compiler.

The current documentation suggests the following setup:

However, this configuration produces the following error:

oxlint


  × typescript(TS2740): Type '{ presets: RolldownBabelPreset[]; }' is missing the following properties from type 'PluginOptions': assumptions, auxiliaryCommentAfter, auxiliaryCommentBefore, comments, and 9 more.
    ╭─[vite.config.ts:31:15]
 30 │         react(),
 31 │         babel({ presets: [reactCompilerPreset()] }),
    ·               ────────────────────────────────────
 32 │         sentryVitePlugin({
    ╰────

Found 0 warnings and 1 error.

Originally posted by @AndreiTS in #9

[AndreiTS]

After installing @types/babel__core the typescript error is fixed, but I'm having trouble building now. I tried this:

        babel({
            presets: ['@babel/preset-typescript', '@babel/preset-react', reactCompilerPreset({})],
        }),

but is not working, I'm having multiple errors like this:

Finished in 57.9s on 3262 files with 133 rules using 16 threads.
✓ 7640 modules transformed.
✗ Build failed in 59.32s
error during build:
Build failed with 4 errors:

[plugin @rolldown/plugin-babel] /home/_/route.tsx?tsr-split=component:12:1
RolldownError: [BabelError] /home/_/route.tsx?tsr-split=component: Unexpected token, expected "," (12:1)

  10 | export function LayoutPrivado({
  11 |   admin
> 12 | }: {
     |  ^
  13 |   admin: boolean;
  14 | }) {
  15 |   return <>

[DanyaalMajid]

Fix for the tsr-split errors

Add @babel/preset-react (as mentioned above) and also exclude the virtual split modules from the babel plugin — that's what's causing all the ?tsr-split=component errors:

babel({
  presets: [
    ["@babel/preset-react", { runtime: "automatic" }],
    reactCompilerPreset(),
  ],
  exclude: [/\?tsr-split/, /node_modules/],
}),

The exclude is the key bit here — TanStack Router's virtual chunks need to be skipped or babel chokes on them.

NOTICE: Solution suggested by claude.

[imoize]

same issue when upgrading Vite 8 and @vitejs/plugin-react 6

[tervay]

This gave me a big headache and ate a bunch of claude tokens.

Echoing what others have said, but the solution was to add @types/babel__core and configure Vite like so:

import react, { reactCompilerPreset } from '@vitejs/plugin-react';
import babel from '@rolldown/plugin-babel';

export default defineConfig({
  resolve: {
    tsconfigPaths: true,
  },
  plugins: [
    tanstackStart({
      srcDirectory: 'app',
    }),
    react(),
    babel({
      presets: [reactCompilerPreset()],
      include: [/\.(ts|tsx|js|jsx)$/],
    }),
    tailwindcss(),
  ],
});

I guess the include block will filter out the virtual chunks, but you can also use an exclude block like someone else above.

[fengzai6]

Why does this plugin require node 22 or above? Vite just need 20.19

[SeanCassiere]

The exclude is the key bit here — TanStack Router's virtual chunks need to be skipped or babel chokes on them.

This is definitely a workaround, since babel should be running on those chunks as well since they contain valid React components.

This source - https://github.com/TanStack/router/blob/32497be9c8fc1c283b876d742deaf5d3bf5f2669/packages/router-plugin/tests/code-splitter/test-files/react/arrow-function.tsx

... becomes code-split into:

• https://github.com/TanStack/router/blob/32497be9c8fc1c283b876d742deaf5d3bf5f2669/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/arrow-function.tsx
• https://github.com/TanStack/router/blob/32497be9c8fc1c283b876d742deaf5d3bf5f2669/packages/router-plugin/tests/code-splitter/snapshots/react/1-default/arrow-function%40component.tsx

[Xhale1]

I ran into some (all?) of the above issues. For some clarity, there appears to be three distinct issues:

1. There is a type error with the documented migration for react compiler unless @types/babel__core is manually installed
2. The @babel/preset-react packages is required as a dev dependency and plugin (possibly just for tanstack router users, I haven't tested without tanstack router)
3. Using the react compiler with this plugin and tanstack router results in errors relating to tsr-split components

Installing @types/babel__core and following this comment resolved my issue, however I settled on using the new Vite 8 while staying on the existing @sentry/vite-plugin v5 for now.

Hopefully this helps future others navigate this issue. I'm also happy to provide more info about these issues if needed!

[sapphi-red]

• There is a type error with the documented migration for react compiler unless @types/babel__core is manually installed

I've now clarified that in vitejs/vite-plugin-react#1147.

• The @babel/preset-react packages is required as a dev dependency and plugin (possibly just for tanstack router users, I haven't tested without tanstack router)
• Using the react compiler with this plugin and tanstack router results in errors relating to tsr-split components

I've released @rolldown/plugin-babel v0.2.1 which should fix this issue when using with tanstack router. It should now work in the way written in the README of plugin-react (i.e. you don't need @babel/preset-react).

[sapphi-red]

Why does this plugin require node 22 or above? Vite just need 20.19

Node 20 is going to reach EOL in the end of next month and I didn't want to cut a breaking change, so dropped it beforehand. You can still use @vitejs/plugin-react v5 if Node 20 is needed.

[fengzai6]

Why does this plugin require node 22 or above? Vite just need 20.19

Node 20 is going to reach EOL in the end of next month and I didn't want to cut a breaking change, so dropped it beforehand. You can still use @vitejs/plugin-react if Node 20 is needed.

OK，THX~