From bb38630bc9c4aed40b72eaa171caf7e410a9e393 Mon Sep 17 00:00:00 2001 From: lauren Date: Mon, 7 Oct 2024 19:14:43 -0400 Subject: [PATCH] Add react-compiler-runtime instructions to compiler docs (#7213) For users of React < 19, there is a new react-compiler-runtime package that can be used to provide a "polyfill" for runtime APIs needed for compiled code. This PR adds docs for that. --- src/content/learn/react-compiler.md | 25 +++++++++++++++++++++++-- 1 file changed, 23 insertions(+), 2 deletions(-) diff --git a/src/content/learn/react-compiler.md b/src/content/learn/react-compiler.md index 2920e864..5afaa4cf 100644 --- a/src/content/learn/react-compiler.md +++ b/src/content/learn/react-compiler.md @@ -20,8 +20,6 @@ These docs are still a work in progress. More documentation is available in the React Compiler is a new experimental compiler that we've open sourced to get early feedback from the community. It still has rough edges and is not yet fully ready for production. - -React Compiler requires React 19 RC. If you are unable to upgrade to React 19, you may try a userspace implementation of the cache function as described in the [Working Group](https://github.com/reactwg/react-compiler/discussions/6). However, please note that this is not recommended and you should upgrade to React 19 when possible. React Compiler is a new experimental compiler that we've open sourced to get early feedback from the community. It is a build-time only tool that automatically optimizes your React app. It works with plain JavaScript, and understands the [Rules of React](/reference/rules), so you don't need to rewrite any code to use it. @@ -226,6 +224,29 @@ module.exports = function () { `babel-plugin-react-compiler` should run first before other Babel plugins as the compiler requires the input source information for sound analysis. +React Compiler works best with React 19 RC. If you are unable to upgrade, you can install the extra `react-compiler-runtime` package which will allow the compiled code to run on versions prior to 19. However, note that the minimum supported version is 17. + + +npm install react-compiler-runtime@experimental + + +You should also add the correct `target` to your compiler config, where `target` is the major version of React you are targeting: + +```js {3} +// babel.config.js +const ReactCompilerConfig = { + target: '18' // '17' | '18' | '19' +}; + +module.exports = function () { + return { + plugins: [ + ['babel-plugin-react-compiler', ReactCompilerConfig], + ], + }; +}; +``` + ### Vite {/*usage-with-vite*/} If you use Vite, you can add the plugin to vite-plugin-react: