score:-1

The answer is inside the warning itself.

You are calling ReactDOMClient.createRoot() on a container that has already been passed to createRoot() before.

The root cause of the warning at my end is that the same DOM element is used to create the root more than once.

To overcome the issue it is to be sure that the createRoot is called only once on one DOM element and after that root.render(reactElement); can be used to update and createRoot should not be used.

score:3

It also happen to me. For me, it because DOMContentLoaded callback triggered twice.

My fix just make sure the container rendered only once.

let container = null;

document.addEventListener('DOMContentLoaded', function(event) {
  if (!container) {
    container = document.getElementById('root1') as HTMLElement;
    const root = createRoot(container)
    root.render(
      <React.StrictMode>
        <h1>ZOO</h1>
      </React.StrictMode>
    );
  }
});

Related Query

More Query from same tag