diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-import-as-local.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-import-as-local.expect.md new file mode 100644 index 0000000000000..f909d7d2c8476 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-import-as-local.expect.md @@ -0,0 +1,71 @@ + +## Input + +```javascript +import { + useEffect, + useRef, + // @ts-expect-error + experimental_useEffectEvent as useEffectEvent, +} from 'react'; + +let id = 0; +function uniqueId() { + 'use no memo'; + return id++; +} + +export function useCustomHook(src: string): void { + const uidRef = useRef(uniqueId()); + const destroyed = useRef(false); + const getItem = (srcName, uid) => { + return {srcName, uid}; + }; + + const getItemEvent = useEffectEvent(() => { + if (destroyed.current) return; + + getItem(src, uidRef.current); + }); + + useEffect(() => { + destroyed.current = false; + getItemEvent(); + }, []); +} + +function Component() { + useCustomHook('hello'); + return
Hello
; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + isComponent: true, + params: [{x: 1}], +}; + +``` + + +## Error + +``` + 19 | }; + 20 | +> 21 | const getItemEvent = useEffectEvent(() => { + | ^^^^^^^ +> 22 | if (destroyed.current) return; + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ +> 23 | + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ +> 24 | getItem(src, uidRef.current); + | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ +> 25 | }); + | ^^^^ InvalidReact: Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef) (21:25) + 26 | + 27 | useEffect(() => { + 28 | destroyed.current = false; +``` + + \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-import-as-local.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-import-as-local.tsx new file mode 100644 index 0000000000000..a1c7220f29058 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/error.bug-import-as-local.tsx @@ -0,0 +1,42 @@ +import { + useEffect, + useRef, + // @ts-expect-error + experimental_useEffectEvent as useEffectEvent, +} from 'react'; + +let id = 0; +function uniqueId() { + 'use no memo'; + return id++; +} + +export function useCustomHook(src: string): void { + const uidRef = useRef(uniqueId()); + const destroyed = useRef(false); + const getItem = (srcName, uid) => { + return {srcName, uid}; + }; + + const getItemEvent = useEffectEvent(() => { + if (destroyed.current) return; + + getItem(src, uidRef.current); + }); + + useEffect(() => { + destroyed.current = false; + getItemEvent(); + }, []); +} + +function Component() { + useCustomHook('hello'); + return
Hello
; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + isComponent: true, + params: [{x: 1}], +};