fix(compiler): use globalThis.Symbol to prevent shadowing by user components #35383
Conversation
There was a problem hiding this comment.
Pull request overview
This PR fixes a critical bug in the React Compiler where generated code uses Symbol.for() without qualifying it with globalThis, which causes runtime errors when a user-defined component is named Symbol, shadowing the global built-in.
Key Changes:
- Updated
CodegenReactiveFunction.tsto useglobalThis.Symbol.for()instead of bareSymbol.for()in two locations (memo cache sentinels and early return sentinels) - Added a test fixture
component-named-symbol-shadows-global.jsto prevent regression
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/component-named-symbol-shadows-global.js |
Adds a regression test with a component named Symbol that shadows the global, ensuring the compiler generates code that explicitly uses globalThis.Symbol.for() |
compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts |
Fixes two locations where Symbol.for() is generated by qualifying it with globalThis.Symbol.for() to prevent shadowing issues |
The fix is well-targeted and addresses the specific issue described in the PR. The test fixture follows the existing pattern used in the codebase, and the changes to CodegenReactiveFunction.ts are minimal and consistent with how globalThis is already used elsewhere in the codebase (e.g., in Globals.ts).
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Summary
Fixes a bug where React Compiler generates code that uses
Symbol.for()without qualifying it withglobalThis, causing runtime errors when a user-defined component is named Symbol.The Problem:
When a user defines a component named Symbol, it shadows the global built-in Symbol. The compiler-generated code (e.g., for memo cache sentinels) tries to call
Symbol.for()but instead accesses the user's component, resulting in"Symbol.for is not a function".Playground repro: Link
The Fix:
Updated CodegenReactiveFunction.ts to use
globalThis.Symbol.for()instead of bareSymbol.for()references. This ensures the built-in global is always used, regardless of local variable names.How did you test this change?
globalThis.Symbol.globalThis.Symbol.