@astrojs/react 7.0.0

Major Changes

• #17951 e5b0ac4 Thanks @hanford! - Migrates the React integration to @vitejs/plugin-react v6, using Oxc for JSX and Fast Refresh. Removes the babel integration option; projects with custom Babel transforms must configure @rolldown/plugin-babel under vite.plugins instead.

  Adds an opt-in compiler option for the Oxc-based React Compiler. Install oxc-transform-react and enable it in your Astro config:

  import react from '@astrojs/react';
  
  export default {
    integrations: [react({ compiler: true })],
  };
  

  The compiler memoizes client components and hooks. Server rendering is not compiled. The target defaults to the installed React major version; React 17 and 18 projects also need react-compiler-runtime installed. Pass an options object to configure the compiler, for example compiler: { compilationMode: 'annotation' }. The integration's include and exclude options apply, and dependencies and Astro files are excluded.

  Migrating custom Babel transforms

  The integration uses @vitejs/plugin-react v6 and Oxc for JSX and Fast Refresh. The babel integration option has been removed in this major release.

  If you use custom Babel transforms, install @rolldown/plugin-babel and @babel/core, keeping your existing Babel plugins and presets installed:

  pnpm add -D @rolldown/plugin-babel @babel/core
  

  Move your Babel plugins and presets from react({ babel: ... }) to babel() in vite.plugins. For example, migrate a project using babel-plugin-styled-components from:

  import react from '@astrojs/react';
  import { defineConfig } from 'astro/config';
  
  export default defineConfig({
    integrations: [react({ babel: { plugins: ['babel-plugin-styled-components'] } })],
  });
  

  To:

  import react from '@astrojs/react';
  import babel from '@rolldown/plugin-babel';
  import { defineConfig } from 'astro/config';
  
  export default defineConfig({
    integrations: [react()],
    vite: {
      plugins: [
        babel({
          plugins: ['babel-plugin-styled-components'],
        }),
      ],
    },
  });
  

  This also works with react({ compiler: true }). Babel runs before Oxc transforms TypeScript and JSX. The Babel plugin automatically enables parsing for .jsx, .ts, and .tsx files. It does not load babel.config.js or .babelrc files; pass the options directly to babel(). The old babel callback is not supported; use the plugin's overrides and preset hooks for conditional transforms.

  Do not enable babel-plugin-react-compiler on the same components as the Oxc compiler.