Never hoist JSX elts referencing vars from the current scope (#14536)

babel · May 9, 2022 · 871ed89 · 871ed89
1 parent 9c1774a
commit 871ed89
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 2 deletions.
diff --git a/packages/babel-plugin-transform-react-constant-elements/src/index.ts b/packages/babel-plugin-transform-react-constant-elements/src/index.ts
@@ -197,7 +197,7 @@ export default declare((api, options: Options) => {
           current = current.parentPath;
           jsxScope = HOISTED.get(current.node);
         }
-        jsxScope ??= getHoistingScope(path.scope);
+        jsxScope ??= path.scope;
 
         const visitorState: VisitorState = {
           isImmutable: true,
@@ -212,7 +212,19 @@ export default declare((api, options: Options) => {
         HOISTED.set(path.node, targetScope);
 
         // Only hoist if it would give us an advantage.
-        if (targetScope === jsxScope) return;
+        for (let currentScope = jsxScope; ; ) {
+          if (targetScope === currentScope) return;
+          if (isHoistingScope(currentScope)) break;
+
+          currentScope = currentScope.parent;
+          if (!currentScope) {
+            throw new Error(
+              "Internal @babel/plugin-transform-react-constant-elements error: " +
+                "targetScope must be an ancestor of jsxScope. " +
+                "This is a Babel bug, please report it.",
+            );
+          }
+        }
 
         const id = path.scope.generateUidBasedOnNode(name);
         targetScope.push({ id: t.identifier(id) });

diff --git a/...ansform-react-constant-elements/test/fixtures/constant-elements/regression-14363/input.js b/...ansform-react-constant-elements/test/fixtures/constant-elements/regression-14363/input.js
@@ -0,0 +1,12 @@
+function RoutesComponent() {
+  return (
+    <Routes>
+      {(c) => {
+        {
+          const Component = c;
+          return <Component />;
+        }
+      }}
+    </Routes>
+  );
+}
diff --git a/...nsform-react-constant-elements/test/fixtures/constant-elements/regression-14363/output.js b/...nsform-react-constant-elements/test/fixtures/constant-elements/regression-14363/output.js
@@ -0,0 +1,10 @@
+function RoutesComponent() {
+  return <Routes>
+      {c => {
+      {
+        const Component = c;
+        return <Component />;
+      }
+    }}
+    </Routes>;
+}