feat(react): add support for React Compiler in @nx/react/babel (#26826 )

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 #

2024-07-04 16:18:34 -04:00

1.1 KiB

Raw Blame History

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 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.

{
  "presets": [
    [
      "@nx/react/babel",
      {
        "runtime": "automatic",
        "reactCompiler": true
      }
    ]
  ],
  "plugins": []
}

You can also pass an object to set compiler options.

{
  "presets": [
    [
      "@nx/react/babel",
      {
        "runtime": "automatic",
        "reactCompiler": {
          "compilationMode": "annotation"
        }
      }
    ]
  ],
  "plugins": []
}

Check the React Compiler usage docs for all support setups, such as Vite, Remix, etc.

1.1 KiB Raw Blame History

React Compiler with Nx

Enabling React Compiler in Nx Projects

1.1 KiB

Raw Blame History