build: Enable React Compiler for Webpack builds #38007
Draft
+206
−4
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/extension-devs (3 files, +19 -3)
📜 @MetaMask/policy-reviewers (3 files, +19 -3)
Tip Follow the policy review process outlined in the LavaMoat Policy Review Process doc before expecting an approval from Policy Reviewers. 🔗 @MetaMask/supply-chain (3 files, +19 -3)
|
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 |
MajorLift
force-pushed
the
jongsun/build/enable-react-compiler-webpack
branch
from
b9c8e5a to
d0ea0c7
Compare
Collaborator
Builds ready [d0ea0c7]
UI Startup Metrics (1210 ± 88 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
b571dfe to
92453b4
Compare
MajorLift
added
the
no-changelog
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
MajorLift
commented
Nov 21, 2025
Comment on lines
331
to
336
| use: [ | ||
| { | ||
| loader: reactCompilerLoader, | ||
| options: defineReactCompilerLoaderOption(reactCompilerOptions), | ||
| }, | ||
| ], |
Contributor
Author
There was a problem hiding this comment.
reactCompilerLoader is applied last, after codeFenceLoader and swcLoader.
- Placing
reactCompilerLoaderbeforecodeFenceLoaderresults in errors about/// END:directives not being found. - Placing it before
swcLoaderresults in errors about input source maps not being found.
| options: defineReactCompilerLoaderOption(reactCompilerOptions), | ||
| }, | ||
| ], | ||
| }, |
There was a problem hiding this comment.
Bug: React Compiler loader missing required loaders
The React Compiler loader rule only applies reactCompilerLoader without the preceding tsxLoader and codeFenceLoader that are necessary to process TypeScript and JSX syntax. According to the PR discussion, reactCompilerLoader must be applied after codeFenceLoader and swcLoader to avoid errors about missing directives and source maps. The current configuration will fail to properly transform files in the UI directory.
Contributor
Author
There was a problem hiding this comment.
reactCompilerLoader is applied last.
- The code-fence directives and input-source-map errors appear if I move
reactCompilerLoaderbetweenswcLoader,codeFenceLoaderin the use chains, or if I move the react compiler rule below the own-javascript/typescript rules. - I can verify that the UI files in the build are being correctly transformed.
This reverts commit 3ac0d1c.
Contributor
Author
|
@metamaskbot update-policies |
MajorLift
force-pushed
the
jongsun/build/enable-react-compiler-webpack
branch
from
b816440 to
659c749
Compare
…n/build/enable-react-compiler-webpack
| export const UI_DIR_RE = new RegExp( | ||
| `${join(__dirname, '../../../').replaceAll(sep, slash)}ui${slash}(?:components|contexts|hooks|layouts|pages)${slash}.*$`, | ||
| 'u', | ||
| ); |
There was a problem hiding this comment.
Bug: Missing path separator in UI directory regex
The UI_DIR_RE regex is missing a path separator between the project root and ui directory. The expression join(__dirname, '../../../') returns a path without a trailing separator, so concatenating it directly with ui${slash} creates an invalid pattern like /path/to/projectui/ instead of /path/to/project/ui/. This causes the regex to never match any files in the ui/ directory, preventing the React Compiler from being applied to UI components.
Contributor
Author
There was a problem hiding this comment.
The opposite is true. Adding an extra slash breaks the regex. I triple-checked while writing this.
| 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 and story files
The negative lookahead in the test regex (?!\.(?:test|stories|container)) checks the position immediately before the file extension, not whether these patterns appear in the filename. For a file like Button.test.tsx, the lookahead checks if the position before .tsx is followed by .test, which it isn't (it's followed by .tsx), so the regex incorrectly matches. This causes the React Compiler to process test files, story files, and container files, which was explicitly intended to be excluded.
Contributor
Author
There was a problem hiding this comment.
The current regex is correct.
- test, story etc. files are being excluded as intended.
- The negative lookahead is supposed to only check the position immediately before the file extension.
Collaborator
Builds ready [54d4402]
UI Startup Metrics (1283 ± 100 ms)
📊 Page Load Benchmark ResultsCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
|
…ongsun/build/enable-react-compiler-webpack
Collaborator
Builds ready [e790a49]
UI Startup Metrics (1230 ± 106 ms)
📊 Page Load Benchmark ResultsCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
|
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
--reactCompilerVerboseWebpack cli argument, which outputs file compilation status, errors, statistics.yarn webpack --reactCompilerVerboseoutput:Changelog
CHANGELOG entry: null (build)
Related issues
react-compiler/react-compilerESLint rule violations #37480: Previous PRManual testing steps
yarn webpack --no-cache.dist/{chrome,firefox}/js-ui_{com,d,p,pages}*Screenshots/Recordings
Pre-merge author checklist
Pre-merge reviewer checklist
Note
Enable React Compiler via
react-compiler-webpackfor selected UI sources, with config, policies, and deps updates.react-compiler-webpack) with rule targetingui/(components|contexts|hooks|layouts|pages)viaUI_DIR_RE.reactCompilerOptions(target17) and wire into loader options.UI_DIR_REinutils/helpers.ts.reactCompilerOptionsinutils/config.ts.react-compiler-runtimeand map JSX syntax deps toreact-compiler-webpackin build-system policy.react-compiler-runtimeresources to MV2/MV3 webpack policies.react-compiler-webpacktopackage.jsonand ignore list in.depcheckrc.yml.Written by Cursor Bugbot for commit 54d4402. This will update automatically on new commits. Configure here.