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;