million
million copied to clipboard
bug: using `ref` variable name when referencing DOM node with `useRef` leads to error
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
Good job @Semro, thank you very much for this! The team will definitely have a look at this.
Hello @Semro , we're looking at this bug more deeply. thanks for share this use case. 👀
Hello @Semro , we're looking at this bug more deeply. thanks for share this use case. 👀
Thank you Oliver!
Will be fixed in a release soon