bug: using `ref` variable name when referencing DOM node with `useRef` leads to error

[Semro]

Describe the bug Naming variable ref when referencing DOM node with useRef:

const ref = React.useRef(null);

will lead to error:

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `_anonymous$2`.
    at MillionBlock (https://vitejsvitetmqweb-ayit--5173--e809191e.local-credentialless.webcontainer.io/node_modules/.vite/deps/million_react.js?v=b5dfed3d:823:42)
    at _anonymous$2 (https://vitejsvitetmqweb-ayit--5173--e809191e.local-credentialless.webcontainer.io/src/App.jsx?t=1688610481787:7:21)
    at App

Renaming the variable helps avoid the error:

const inputRef = React.useRef(null);

But inputRef will never reference DOM node. It always in it's initial state with null value. The bug doesn't reproduce if you reference something else other than DOM node.

To Reproduce Here's an example: https://stackblitz.com/edit/vitejs-vite-tmqweb?file=src%2FApp.jsx

Device (please complete the following information):

• OS: Linux 64-bit
• Browser: Chrome 114.0.5735.198 (Official Build) (64-bit)
• Version: Million 2.4.9, React 18.2.0, Vite 4.3.9

[tobySolutions]

Good job @Semro, thank you very much for this! The team will definitely have a look at this.

[oliverloops]

Hello @Semro , we're looking at this bug more deeply. thanks for share this use case. 👀

[tobySolutions]

Hello @Semro , we're looking at this bug more deeply. thanks for share this use case. 👀

Thank you Oliver!

[aidenybai]

Will be fixed in a release soon