[Compiler Bug]: Closure prop hoisted outside its lexical scope

[sliminality]

What kind of issue is this?

• React Compiler core (the JS output is incorrect, or your app works incorrectly after optimization)
• babel-plugin-react-compiler (build issue installing or using the Babel plugin)
• eslint-plugin-react-hooks (build issue installing or using the eslint plugin)
• react-compiler-healthcheck (build issue installing or using the healthcheck script)

Link to repro

Playground

Repro steps

In the following example, () => MY_ARGUMENT gets compiled to a top-level function _temp, but MY_ARGUMENT is unbound in _temp.

Input

function f(MY_ARGUMENT) {
  const Foo = () => <Bar prop={() => MY_ARGUMENT} />
  return Foo
}

Output

import { c as _c } from "react/compiler-runtime";
function f(MY_ARGUMENT) {
  const Foo = () => …;
  return Foo;
}
function _temp() {
  return MY_ARGUMENT; // ❌ This is unbound!
}

This repros regardless of whether Foo is returned (though an unused Foo would probably be stripped out by a different optimizing pass). If foo is lowercase, hoisting will not occur.

How often does this bug happen?

Every time

What version of React are you using?

"target": "19"

What version of React Compiler are you using?

1.0.0