653cad2492
This PR adds a check in `@nx/react/babel` preset to enable React Compiler when `babel-plugin-react-compiler` is installed. This affects: - React apps using Webpack + Babel - React libs using Rollup + Babel - React Native apps using Webpack + Babel If SWC is used, there is no way to use React Compiler currently. Also adds a [new recipe](https://nx-dev-git-feat-react-compiler-nrwl.vercel.app/recipes/react/react-compiler) showing how to enable the compiler using `@nx/react/babel`. ## Current Behavior <!-- This is the behavior we have today --> ## Expected Behavior <!-- This is the behavior we should expect with the changes in this PR --> ## Related Issue(s) <!-- Please link the issue being fixed so it gets closed when this is merged. --> Fixes #
44 lines
1.1 KiB
Markdown
44 lines
1.1 KiB
Markdown
# React Compiler with Nx
|
|
|
|
React 19 comes with an experimental compiler that optimizes application code to automatically memoize code. Read the [official React Compiler documentation](https://react.dev/learn/react-compiler) for more information.
|
|
|
|
## Enabling React Compiler in Nx Projects
|
|
|
|
For Nx projects using Babel and the `@nx/react/babel` preset, install the `babel-plugin-react-compiler` package and enable it with the `reactCompiler` option.
|
|
|
|
```json {% highlightLines=[7] %}
|
|
{
|
|
"presets": [
|
|
[
|
|
"@nx/react/babel",
|
|
{
|
|
"runtime": "automatic",
|
|
"reactCompiler": true
|
|
}
|
|
]
|
|
],
|
|
"plugins": []
|
|
}
|
|
```
|
|
|
|
You can also pass an object to set compiler options.
|
|
|
|
```json {% highlightLines=["7-9"] %}
|
|
{
|
|
"presets": [
|
|
[
|
|
"@nx/react/babel",
|
|
{
|
|
"runtime": "automatic",
|
|
"reactCompiler": {
|
|
"compilationMode": "annotation"
|
|
}
|
|
}
|
|
]
|
|
],
|
|
"plugins": []
|
|
}
|
|
```
|
|
|
|
Check the [React Compiler usage docs](https://react.dev/learn/react-compiler#installation) for all support setups, such as Vite, Remix, etc.
|