[Compiler Bug]: False positive Ref values (the current property) may not be accessed during render for non-jsx code

[dimaMachina]

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-compiler (build issue installing or using the eslint plugin)
• react-compiler-healthcheck (build issue installing or using the healthcheck script)

Link to repro

https://playground.react.dev/#N4Igzg9grgTgxgUxALhAHRFMCAEcA2AlggHYAuGA3GiTYQLYAOEMZOwOAVmAB44C+OAGYwI9HBhgIAhnDIB6bjwC0MKOQYIqdJizYcsCAEoIhA4aPGSZc7STgQSYNgGEI+fNMbYcAXhwAFMA0OHgAFoT4ACZStCT8AJR+AHzsIXiOzhnk0oQkCDAmZv6GRQEkUB4J1CShUmSwtfIAVDgAAgD6HQAKAKpGAKJdOM2KvAEYUYQAbhgANGm1oThSQsjZZLn5haZz6aFwEdGx6Yk1-DUIPMys7DhuHl4+FyD8QA

Repro steps

following code gives false positive error

const Collapse = ({
  children
}) => {
  const containerRef = useRef(null);
  return /* @__PURE__ */jsx("div", {
    ref: containerRef,
    children
  });
};

but not

export const Collapse: FC<{
  children: ReactNode
}> = ({ children }) => {
  const containerRef = useRef<HTMLDivElement>(null!)

  return <div ref={containerRef}>{children}</div>
}

How often does this bug happen?

Every time

What version of React are you using?

from playground

What version of React Compiler are you using?

from playground

[gsathya]

The react compiler needs to run on the original source, not transformed code. There is some support forjsx calls, but it's not recommended.