fix(compiler): use globalThis.Symbol to prevent shadowing by user components

Author: gowthamrdyy

compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts

@@ -748,7 +748,13 @@ function codegenReactiveScope(
         true,
       ),
       t.callExpression(
-        t.memberExpression(t.identifier('Symbol'), t.identifier('for')),
+        t.memberExpression(
+          t.memberExpression(
+            t.identifier('globalThis'),
+            t.identifier('Symbol'),
+          ),
+          t.identifier('for'),
+        ),
         [t.stringLiteral(MEMO_CACHE_SENTINEL)],
       ),
     );
@@ -968,7 +974,13 @@ function codegenReactiveScope(
           '!==',
           t.identifier(name),
           t.callExpression(
-            t.memberExpression(t.identifier('Symbol'), t.identifier('for')),
+            t.memberExpression(
+              t.memberExpression(
+                t.identifier('globalThis'),
+                t.identifier('Symbol'),
+              ),
+              t.identifier('for'),
+            ),
             [t.stringLiteral(EARLY_RETURN_SENTINEL)],
           ),
         ),

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/component-named-symbol-shadows-global.js

@@ -0,0 +1,15 @@
+import {identity} from 'shared-runtime';
+
+function Symbol() {
+  return <div>I am a component named Symbol</div>;
+}
+
+function Component({value}) {
+  const x = identity(value);
+  return <Symbol>{x}</Symbol>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 'hello'}],
+};