Skip to content

Commit d575cca

Browse files
committed
docs: Update Vite React Compiler setup for @vitejs/plugin-react@6.0.0
- Add instructions for using reactCompilerPreset with @rolldown/plugin-babel - Document that inline babel option was removed in version 6.0.0 - Keep backward compatibility note for older versions - Remove outdated vite-plugin-babel reference Fixes #8353
1 parent c062be0 commit d575cca

File tree

1 file changed

+30
-12
lines changed

1 file changed

+30
-12
lines changed

src/content/learn/react-compiler/installation.md

Lines changed: 30 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -64,9 +64,32 @@ module.exports = {
6464

6565
### Vite {/*vite*/}
6666

67-
If you use Vite, you can add the plugin to vite-plugin-react:
67+
If you use Vite with version 6.0.0 or later of `@vitejs/plugin-react`, you can use the `reactCompilerPreset`:
6868

69-
```js {3,9}
69+
<TerminalBlock>
70+
npm install -D @rolldown/plugin-babel
71+
</TerminalBlock>
72+
73+
```js {3-4,9-11}
74+
// vite.config.js
75+
import { defineConfig } from 'vite';
76+
import react, { reactCompilerPreset } from '@vitejs/plugin-react';
77+
import babel from '@rolldown/plugin-babel';
78+
79+
export default defineConfig({
80+
plugins: [
81+
react(),
82+
babel({
83+
presets: [reactCompilerPreset()]
84+
}),
85+
],
86+
});
87+
```
88+
89+
<Note>
90+
In `@vitejs/plugin-react@6.0.0`, the inline Babel option was removed. If you're using an older version, you can use:
91+
92+
```js
7093
// vite.config.js
7194
import { defineConfig } from 'vite';
7295
import react from '@vitejs/plugin-react';
@@ -81,26 +104,21 @@ export default defineConfig({
81104
],
82105
});
83106
```
107+
</Note>
84108

85-
Alternatively, if you prefer a separate Babel plugin for Vite:
86-
87-
<TerminalBlock>
88-
npm install -D vite-plugin-babel
89-
</TerminalBlock>
109+
Alternatively, you can use the Babel plugin directly with `@rolldown/plugin-babel`:
90110

91-
```js {2,11}
111+
```js {3,9}
92112
// vite.config.js
93-
import babel from 'vite-plugin-babel';
94113
import { defineConfig } from 'vite';
95114
import react from '@vitejs/plugin-react';
115+
import babel from '@rolldown/plugin-babel';
96116

97117
export default defineConfig({
98118
plugins: [
99119
react(),
100120
babel({
101-
babelConfig: {
102-
plugins: ['babel-plugin-react-compiler'],
103-
},
121+
plugins: ['babel-plugin-react-compiler'],
104122
}),
105123
],
106124
});

0 commit comments

Comments
 (0)