Module-level directives not working as documented in React Compiler
The React Compiler fails to process module-level 'use memo' directives while working correctly with function-level ones. This contradicts documented behavior and requires investigation into directive parsing logic. The issue provides clear reproduction steps but may require deep compiler knowledge.
https://github.com/tryasko/test-react-compiler
React Compiler compiles a component when 'use memo' is placed inside the function body, but does NOT compile the same component when 'use memo' is placed at the module level.
According to the documentation, module-level directives should apply to all functions in the file:
https://react.dev/reference/react-compiler/directives
"Place directives at the top of a file to affect all functions in that module."
However, in my setup, only function-level directives trigger compilation, while module-level directives are ignored.
npm inpm startoutput directory.| Component file | Directive level | Compilation | Expected result |
|---|---|---|---|
| component-a.jsx | no directive | Not compiled | ✅ Expected |
| component-b.jsx | function-level | Compiled | ✅ Expected |
| component-c.jsx | module-level | Not compiled | ❌ Not expected |
React Compiler should compile components when 'use memo' is placed at the module level, the same way it does when the directive is placed at the function level.
Specifically, the output for component-c.jsx should include React Compiler transformations, such as:
import { c as _c } from "react/compiler-runtime";
Claim this issue to let others know you're working on it. You'll earn 15 points when you complete it!