Error in React Aria Modal with React 18 and createRoot

[informa]

Hi, I just was having trouble with your library with React 18.

Looks like React 18 have deprecated ReactDOM.render in favour of using import { createRoot } from 'react-dom/client'; https://react.dev/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis

When I use this together with React Aria Modal, I get an error

Cannot read properties of null (reading 'parentNode')

It seems to be erroring on this line

this.state.container.parentNode.removeChild(this.state.container);

This is a demo https://codesandbox.io/s/cra5-react18-ariamodal5-cyvcp7?file=/src/index.js

I was wondering if there was something I am missing or forgot to include for the react aria modal. It seems to work as expected when using React 17 and ReactDOM.render.

https://codesandbox.io/s/cra4-react17-ariamodal5-7thrck?file=/src/index.js

[informa]

Actually when removing StrickMode the issue is solved.

These are the docs https://react.dev/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis

With Strict Mode in React 18, React will simulate unmounting and remounting the component in development mode:

When simulating the unmounting this.state.container is null ?

[NetDead]

Removing StrictMode doesn't seem good for some projects. You can try to add a exact node to rendering model using renderTo function, see example

[informa]

Hey thanks @NetDead, I'll look into this.

[informa]

Hi @NetDead , any idea how you can get onEnter css animations working with renderTo.

RenderTo certainly solves the issue about React 18 StrictMode and the modal being removed in componentWillUnmount.

Also looks like focus trap is affected by the StrictMode, but can live with that.

[informa]

I think AriaModal.renderTo() runs onEnter and therefore the css added on enter is always there. So it looks like it displays when it is a transition end.

I tried storing AriaModal.renderTo() in the state rather than in a const and it seemed to work.

https://codesandbox.io/s/cra5-react18-ariamodal5-forked-qz3935?file=/src/App.js