@astrojs/react@7.0.0
withastro/astro@astrojs/react@7.0.0Sep 22, 2026by astrobot-houston
Upgrading?
AI Summary
This major release migrates the React integration to `@vitejs/plugin-react` v6 and Oxc for JSX compilation, removing the legacy `babel` option and introducing an opt-in React Compiler.
Key Highlights
- Migrates to `@vitejs/plugin-react` v6 and Oxc for JSX and Fast Refresh.
- Adds an opt-in `compiler` option using the Oxc-based React Compiler.
- Removes the `babel` integration option.
Breaking Changes
- Removes the `babel` integration option.
- Projects using custom Babel transforms must migrate to `@rolldown/plugin-babel`.
New Features
- Opt-in Oxc-based React Compiler
Full Release Notes
### Major Changes
- [#17951](https://github.com/withastro/astro/pull/17951) [`e5b0ac4`](https://github.com/withastro/astro/commit/e5b0ac4b26fa7c9b74b62fbe3dfdcde1f418d92d) Thanks [@hanford](https://github.com/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:
```js
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:
```sh
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:
```js
import react from '@astrojs/react';
import { defineConfig } from 'astro/config';
export default defineConfig({
integrations: [react({ babel: { plugins: ['babel-plugin-styled-components'] } })],
});
```
To:
```js
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](https://github.com/rolldown/plugins/tree/main/packages/babel#options) for conditional transforms.
Do not enable `babel-plugin-react-compiler` on the same components as the Oxc compiler.Related Repositories
openclaw/openclaw★ 392,705
The AI that really does things. Any OS. Any Platform. The lobster way. 🦞
nilbuild/developer-roadmap★ 370,073
Interactive roadmaps, guides and other educational content to help developers grow in their careers.
morluto/rea★ 358,099
Reverse engineer anything with agents, from app behavior down to native binaries.
anomalyco/opencode★ 219,703
The open source coding agent.
n8n-io/n8n★ 208,257
Fair-code workflow automation platform with native AI capabilities. Combine visual building with custom code, self-host or cloud, 400+ integrations.