#18277 2715958 Thanks @florian-lefebvre! - Increases the minimum Node.js version to 22.22.0
The minimum supported Node.js version is now 22.22.0, the latest Node.js 22 release supported by StackBlitz. This change is in line with Astro’s Node.js support policy.
b7a1bd9]:
#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.
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/coreMove 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.
7a6e7f7 Thanks @astro-factory! - Fixes Vue render-function components failing to build when @astrojs/react is also enabled. React’s renderer check no longer crashes on non-React object components, and Vue’s check now recognizes defineComponent() components that use a setup function returning a render function.f8e9458]:
05763a0]:
8c193f6]:
c895b12]:
eb6f97e]:
#17093 4585fe5 Thanks @Princesseuh! - Replaces the import entrypoint of getContainerRenderer()
A new container-renderer entrypoint exporting getContainerRenderer() has been added to the following integrations: React, Preact, Svelte, SolidJS, Vue, and MDX. This prevents bundlers from trying to bundle unrelated exports from the package root when only the Container API is used.
If you are using the Container API, update your import statements to use the new entrypoint. The following example updates the getContainerRenderer() import for React:
import { getContainerRenderer } from '@astrojs/react';import { getContainerRenderer } from '@astrojs/react/container-renderer';Importing getContainerRenderer() from the package root still works, but is now deprecated and logs a warning.
#17093 4585fe5 Thanks @Princesseuh! - Replaces the import entrypoint of getContainerRenderer()
A new container-renderer entrypoint exporting getContainerRenderer() has been added to the following integrations: React, Preact, Svelte, SolidJS, Vue, and MDX. This prevents bundlers from trying to bundle unrelated exports from the package root when only the Container API is used.
If you are using the Container API, update your import statements to use the new entrypoint. The following example updates the getContainerRenderer() import for React:
import { getContainerRenderer } from '@astrojs/react';import { getContainerRenderer } from '@astrojs/react/container-renderer';Importing getContainerRenderer() from the package root still works, but is now deprecated and logs a warning.
f732f3c]:
d365c97]:
a2b9eeb Thanks @fkatsuhiro! - Fix React 19 “Float” mechanism injecting into Astro islands instead of the . This PR adds a filter to @astrojs/react to strip these auto-generated resource from the island’s HTML output, ensuring valid HTML structure.#15378 a8a926e Thanks @dmgawel! - Fix React hydration errors when using conditional slot rendering
#15146 f771f75 Thanks @kedarvartak! - Fixes hydration mismatch when using experimentalReactChildren
#14917 769265b Thanks @sanjaiyan-dev! - Refactors to improve the performance of rendering static HTML content in React
d3c7de9 Thanks @florian-lefebvre! - Removes temporary support for Node >=20.19.1 because Stackblitz now uses Node 22 by default