[Mistake]: Outdated React Compiler setup instructions with Vite

[Abdalrhman-Almarakeby]

Summary

The Vite installation instructions for React Compiler use the old inline babel option which no longer works in @vitejs/plugin-react@6.0.0.

Page

https://react.dev/learn/react-compiler/installation

Details

In @vitejs/plugin-react@6.0.0, Babel was removed as a dependency. The documented approach no longer works:

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
    react({
      // can't use babel option here
      babel: {
        plugins: ['babel-plugin-react-compiler'],
      },
    }),
  ],
});

The correct setup now requires @rolldown/plugin-babel, it can be used like this (this is the simplest way to use the plugin):

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import babel from '@rolldown/plugin-babel'

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

The changelog recommends using reactCompilerPreset like this:

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

export default defineConfig({
  plugins: [
    react(),
    babel({
      presets: [reactCompilerPreset()]
    }),
  ]
})

I am not sure which way is supposed to be listed in the installation page, but it needs to be updated to one of them, or maybe both should be mentioned.

References:

• Vite Plugin React@6.0.0 changelog
• Vite Plugin React README
• Vite Plugin React README - React Compiler
• rolldown/plugin-babel README