react-three-a11y
react-three-a11y copied to clipboard
pmndrs
StrictMode causes crashing (due to issue with <Html> root, and others)
With latest versions of react, three, r3f, a11y packages, I'm encountering an issue in my vite and next projects. In some conditions, it is app crashing.
Here is a reproduction. https://codesandbox.io/p/sandbox/7rkzpf
You'll see, on load, an error in the console:
You are calling ReactDOMClient.createRoot() on a container that has already been passed to createRoot() before. Instead, call root.render() on the existing root instead if you want to update it.
If you unmount and remount the <A11y> component, with the provided button, the app will crash:
Cannot update an unmounted root.
(This is a simplification of the way my apps are currently crashing.)
THIS IS NOT AN ISSUE OUTSIDE OF STRICT MODE. As far as I can tell, removing the strict wrapper from my repro removes the issue. But that is not an option for me in my projects.
I'm no wizard! But, to my naive eye, all of this seems to be related to increased strictness with root handling in react. It seems the <Html> component might need to:
- Maintain reference to the root and not redeclare it if its been declared.
- Not call render on a root that is unmounted. (It seems the rendering effect can occasionally be called after the cleanup effect that unmounts the root?)
I forked and tried to fix. I was able to stop the crashing by naively implementing the above. E.g. creating el and root together in the same state hook and using an isUnmounted ref as a check before render calls. However, I don't understand this library and all of its many a11y concerns to be confident in my fix--and I think I broke behaviors. (Tab focus stopped working properly after remount.)
When I replaced the component with the drei <Html> component in my fork, all seemed to work just fine.
But again--I might have introduced issues too subtle for me to notice!
