Helpful References
Things I’ve Learned
React Compiler is currently in Beta (as of writing 2025/01/30)
React Compiler can be used with React 17, 18, or 19 React Compiler - React (Using React Compiler with React 17 or 18)
There is a community Webpack loader for React Compiler
React Compiler is fairly strict about projects following the Rules of React
There is a React Compiler eslint plugin that can be used even if React Compiler itself isn’t being used
What I’ve Tried
In order to test out the possibility of using React Compiler on our MFEs, I decided to try setting it up for frontend-app-learning. The first thing I did was install dependencies
diff --git a/package.json b/package.json
index 80d11b8..d37bffd 100644
--- a/package.json
+++ b/package.json
@@ -64,6 +64,7 @@
"prop-types": "15.8.1",
"query-string": "^7.1.3",
"react": "17.0.2",
+ "react-compiler-runtime": "^19.0.0-beta-27714ef-20250124",
"react-dom": "17.0.2",
"react-helmet": "6.1.0",
"react-redux": "7.2.9",
@@ -87,9 +88,11 @@
"axios-mock-adapter": "2.1.0",
"bundlewatch": "^0.4.0",
"eslint-import-resolver-webpack": "^0.13.9",
+ "eslint-plugin-react-compiler": "^19.0.0-beta-27714ef-20250124",
"jest": "^29.7.0",
"jest-console-group-reporter": "^1.1.1",
"jest-when": "^3.6.0",
+ "react-compiler-webpack": "^0.1.2",
"rosie": "2.1.1"
},
"bundlewatch": {
I then updated the webpack dev config to use React Compiler in local testing
diff --git a/webpack.dev.config.js b/webpack.dev.config.js
index ddf63de..2a0a9c6 100644
--- a/webpack.dev.config.js
+++ b/webpack.dev.config.js
@@ -1,5 +1,7 @@
const path = require('path');
const { createConfig } = require('@openedx/frontend-build');
+// You can leverage your IDE's Intellisense (autocompletion, type check, etc.) with the helper function `defineReactCompilerLoaderOption`:
+const { defineReactCompilerLoaderOption, reactCompilerLoader } = require('react-compiler-webpack');
const config = createConfig('webpack-dev');
@@ -8,4 +10,24 @@ config.resolve.alias = {
'@src': path.resolve(__dirname, 'src'),
};
+config.module.rules.push(
+ {
+ test: /\.[mc]?[jt]sx?$/i,
+ exclude: /node_modules/,
+ use: [
+ // babel-loader, swc-loader, esbuild-loader, or anything you like to transpile JSX should go here.
+ // If you are using rspack, the rspack's buiilt-in react transformation is sufficient.
+ // { loader: 'swc-loader' },
+ // Now add forgetti-loader
+ {
+ loader: reactCompilerLoader,
+ options: defineReactCompilerLoaderOption({
+ // React Compiler options goes here
+ target: '17'
+ })
+ }
+ ]
+ }
+);
+
module.exports = config;
After that, I tried starting the MFE with npm run dev and loading the demo course. I immediately hit the following error:
I did a bit of searching and found a bug report from someone who encountered the same error when trying to use React Compiler with their project
My next thought was that this issue may be something the React Compiler eslint plugin would catch, so I decided to set that up
diff --git a/.eslintrc.js b/.eslintrc.js
index 97be119..5309f19 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -2,6 +2,9 @@
const { createConfig } = require('@openedx/frontend-build');
const config = createConfig('eslint', {
+ plugins: [
+ 'eslint-plugin-react-compiler',
+ ],
rules: {
// TODO: all these rules should be renabled/addressed. temporarily turned off to unblock a release.
'react-hooks/rules-of-hooks': 'off',
@@ -11,6 +14,7 @@ const config = createConfig('eslint', {
'react/jsx-no-useless-fragment': 'off',
'react/no-unknown-property': 'off',
'func-names': 'off',
+ 'react-compiler/react-compiler': 'error',
},
settings: {
'import/resolver': {