After Vite 8, should we turn to @rolldown/plugin-babel for babel plugins?

[amio]

Previously I'm using styled jsx:

import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: ['styled-jsx/babel'],
      },
    }),
  ],
})

After Vite 8, should I change it to below?

import react from '@vitejs/plugin-react'
import babel from '@rolldown/plugin-babel'

export default defineConfig({
  plugins: [
    react(),
    babel({
      plugins: ['styled-jsx/babel'],
    }),
  ],
})

[ArnaudBarre]

Yes this is expected, but if your only usage of Babel is for styled component, you should be able to use oxc builtin transform:

import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  oxc: {
    plugins: {
      // https://oxc.rs/docs/guide/usage/transformer/plugins.html#basic-usage
      styledComponents: {
        displayName: true,
        ssr: true,
        fileName: true,
        minify: true,
      },
    }
  }
})

[halilibrahimcelik]

React Compiler + Vite 8 + @vitejs/plugin-react v6: docs mismatch and the working setup

The React docs currently show how to wire React Compiler through @vitejs/plugin-react using the babel option:

plugins: [
  react({
    babel: {
      plugins: ["babel-plugin-react-compiler"],
    },
  }),
],

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

However, that example targets @vitejs/plugin-react v4/v5. In v6, the babel option was removed from the plugin’s type definitions entirely, so you can’t configure Babel plugins through react({ babel: ... }) anymore (at least not in a typed/official way).

What to do on Vite 8

With Vite v8, the practical approach is to run the React Compiler via a dedicated Babel plugin integration, e.g. @rolldown/plugin-babel, and keep @vitejs/plugin-react for React Fast Refresh / React handling.

Here’s a working configuration example:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import babel from "@rolldown/plugin-babel";
import path from "path";

export default defineConfig({
  plugins: [
    babel({
      plugins: [["babel-plugin-react-compiler"]],
    }),
    react(),
  ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

I come up with solution, if anyone have better approach I'm all ears.