...
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
| Code Block |
|---|
|
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
| Code Block |
|---|
|
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; |