build: Enable React Compiler for Webpack builds #38007
Open
+251
−12
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Contributor
|
CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes. |
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
Contributor
Author
|
@metamaskbot update-policies |
Collaborator
|
No policy changes |
MajorLift
force-pushed
the
jongsun/build/enable-react-compiler-webpack
branch
from
4df456e to
e1f1daa
Compare
Contributor
Author
|
@metamaskbot update-policies |
MajorLift
force-pushed
the
jongsun/build/enable-react-compiler-webpack
branch
from
e1f1daa to
20b99b9
Compare
Collaborator
|
No policy changes |
Contributor
Author
|
@metamaskbot update-policies |
7 tasks
Collaborator
|
Policy update failed. You can review the logs or retry the policy update here |
1 similar comment
Collaborator
|
Policy update failed. You can review the logs or retry the policy update here |
Contributor
Author
|
@metamaskbot update-policies |
Collaborator
|
No policy changes |
1 similar comment
Collaborator
|
No policy changes |
MajorLift
force-pushed
the
jongsun/build/enable-react-compiler-webpack
branch
from
20b99b9 to
3db3c08
Compare
Contributor
Author
|
@metamaskbot update-policies |
Collaborator
|
Policies updated. 🧠 Learn how: https://lavamoat.github.io/guides/policy-diff/#what-to-look-for-when-reviewing-a-policy-diff |
Collaborator
✨ Files requiring CODEOWNER review ✨📜 @MetaMask/policy-reviewers (3 files, +21 -5)
Tip Follow the policy review process outlined in the LavaMoat Policy Review Process doc before expecting an approval from Policy Reviewers. |
Collaborator
Builds ready [c4f11c5]
UI Startup Metrics (1222 ± 95 ms)
📊 Page Load Benchmark ResultsCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
|
MajorLift
force-pushed
the
jongsun/build/enable-react-compiler-webpack
branch
from
c4f11c5 to
0245a73
Compare
Collaborator
Builds ready [0245a73]
UI Startup Metrics (1199 ± 102 ms)
📊 Page Load Benchmark ResultsCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
|
Contributor
Author
|
@metamaskbot update-policies |
Collaborator
|
Policies updated. 🧠 Learn how: https://lavamoat.github.io/guides/policy-diff/#what-to-look-for-when-reviewing-a-policy-diff |
Collaborator
Builds ready [0b22503]
UI Startup Metrics (1193 ± 82 ms)
📊 Page Load Benchmark ResultsCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
|
MajorLift
force-pushed
the
jongsun/build/enable-react-compiler-webpack
branch
from
0b22503 to
d9aa833
Compare
Contributor
Author
|
@metamaskbot update-policies |
Collaborator
|
Policy update failed. You can review the logs or retry the policy update here |
…Threshold` option
…etOptions` return object
MajorLift
force-pushed
the
jongsun/build/enable-react-compiler-webpack
branch
from
ac42922 to
b560c3e
Compare
Contributor
Author
|
@metamaskbot update-policies |
Collaborator
|
Policies updated. 🧠 Learn how: https://lavamoat.github.io/guides/policy-diff/#what-to-look-for-when-reviewing-a-policy-diff |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
| type: 'asset/resource', | ||
| }, | ||
| { | ||
| test: /(?:.(?!\.(?:test|stories|container)))+\.(?:m?[jt]s|[jt]sx)$/u, |
There was a problem hiding this comment.
Bug: Regex fails to exclude test/stories/container files
The regex /(?:.(?!\.(?:test|stories|container)))+\.(?:m?[jt]s|[jt]sx)$/u intended to exclude test, stories, and container files actually matches them. Since the regex lacks a ^ anchor, it can start matching from any position. For a file like Button.test.tsx, the regex matches starting at the . before test because at that position, what follows (test.tsx) doesn't start with \.test (it starts with t). This allows .test to match the first part and .tsx to match the second, resulting in the full match .test.tsx. Test and story files will be processed by the React Compiler loader when they should be excluded.
Contributor
Author
There was a problem hiding this comment.
Fixed: 37abf44
Validation: https://regex101.com/r/FrjtT3/1
babel.config.js
Outdated
| { | ||
| test: new RegExp( | ||
| `^${path.join(__dirname, 'ui')}${slash}(?:components|contexts|hooks|layouts|pages)${slash}(?:.(?!\\.(?:test|stories|container)))+\\.(?:m?[jt]s|[jt]sx)$`, | ||
| `^${path.join(__dirname, 'ui')}${slash}(?:components|contexts|hooks|layouts|pages)${slash}^(?!.*\\.(?:test|stories|container)\\.)(?:.*)\\.(?:m?[jt]s|[jt]sx)$$`, |
There was a problem hiding this comment.
Bug: Malformed regex prevents Babel React Compiler plugin
The regex pattern contains a ^ (start-of-string anchor) in the middle of the pattern after ${slash} and before (?!.... Since characters have already been matched before this position, the ^ can never match, causing the entire regex to never match any files. Additionally, the pattern ends with $$ instead of $. These errors cause the babel-plugin-react-compiler to never be applied to any files during Babel builds.
Contributor
Author
There was a problem hiding this comment.
Fixed: e7c11bf
Validation: https://regex101.com/r/dmAayr/3
| const reactCompilerOptions = { | ||
| target, | ||
| logger: verbose ? (reactCompilerLogger as Logger) : undefined, | ||
| panicThreshold: debug === 'none' ? debug : `${debug}_errors`, |
There was a problem hiding this comment.
Bug: Invalid panicThreshold value when debug is none
When debug is 'none', the code sets panicThreshold: 'none', but 'none' is not a valid panicThreshold value for React Compiler. According to React Compiler documentation, valid values are 'all_errors', 'critical_errors', or undefined (to disable panicking). The intended behavior of "prevent build from failing" requires setting panicThreshold to undefined, not the string 'none'. This may cause undefined behavior or runtime errors when React Compiler processes the unrecognized value.
Contributor
Author
There was a problem hiding this comment.
Fixed: 0b3aa55
'none'is accepted and triggers the correct behavior. It's also present in the type definition. But switching to undefined just to be safe, since missing properties fallback to default values.- undefined (i.e. optional) being the default value for
panicThresholdis why I initially had'all','critical', and undefined as the options for this flag, but'none'as a default value is more explicit and consistent.
MajorLift
force-pushed
the
jongsun/build/enable-react-compiler-webpack
branch
from
37abf44 to
e7c11bf
Compare
Collaborator
Builds ready [0b3aa55]
UI Startup Metrics (1245 ± 112 ms)
📊 Page Load Benchmark ResultsCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
Collaborator
Builds ready [00b19d0]
UI Startup Metrics (1198 ± 104 ms)
📊 Page Load Benchmark ResultsCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
Collaborator
Builds ready [fdba65b]
UI Startup Metrics (1217 ± 94 ms)
📊 Page Load Benchmark ResultsCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Enables React Compiler code transformation and optimizations for Webpack builds.
The UI Startup and pageLoad benchmark results consistently show no evidence of initial load performance regression due to this change.
Webpack CLI arguments
--reactCompilerDebug('all' | 'critical' | 'none')This sets the
panicThresholdcompiler option for stricter debugging.There are still a large number of React Compiler errors present in the app that do not break functionality but prevent compiler optimizations from being applied. We should aim for eventually being able to create non-production builds with
panicThresholdset tocritical_errors, and then toall_errors.--reactCompilerVerbose(boolean)This outputs compilation status and error descriptions per file, as well as compiler run result statistics.
The output distinguishes between actionable errors, which are fixable from our end, and "unsupported" errors that are caused by limitations or unimplemented features in React Compiler itself.
Changelog
CHANGELOG entry: null (build)
Related issues
react-compiler/react-compilerESLint rule violations #37480Manual testing steps
CLI arguments
yarn webpack --reactCompilerVerboseshould result in the output seen in the screenshot above.yarn webpack --reactCompilerDebug=allshould result in the build failing with errors.Build output
yarn webpack../dist/{chrome,firefox}/js-ui_{com,d,p,pages}*react_compiler_runtime__WEBPACK_IMPORTED_MODULE_0__.c"$variable e.g.Screenshots/Recordings
Pre-merge author checklist
Pre-merge reviewer checklist
Note
Enables React Compiler in Webpack builds via a new loader and plugin, adds CLI flags for verbosity/debug, updates Babel matching, and adjusts LavaMoat policies/deps.
getReactCompilerLoaderand apply toui/**files usingUI_DIR_REand a new module rule indevelopment/webpack/webpack.config.ts.ReactCompilerPluginto print compilation stats when--reactCompilerVerboseis enabled.development/webpack/utils/cli.ts) with--reactCompilerVerboseand--reactCompilerDebugoptions and include them in dry-run output; update tests with new defaults.babel.config.jsto exclude*.test|*.stories|*.containerwhile capturing all other JS/TS/JSX/TSX underui/**.react-compiler-webpackandreact-compiler-runtimeand related Babel syntax plugins.react-compiler-webpackand updateyarn.lockto newer@babel/plugin-syntax-jsx/typescriptentries.react-compiler-webpackto.depcheckrc.ymlignores.Written by Cursor Bugbot for commit fdba65b. This will update automatically on new commits. Configure here.