'Stand-alone React 18 page warning: importing createRoot from "react-dom"

I'm trying to create a stand-alone webpage that uses React 18:

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Hello React!</title>
      <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
      <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
      <script src="https://unpkg.com/[email protected]/babel.js"></script>
   </head>
   <body>
      <div id="root"></div>

      <script type="text/babel">
      
      const root = ReactDOM.createRoot(document.getElementById("root"));
      root.render(<h1>Hello React!</h1>);
         
      </script>
   </body>
</html>

Although the page technically works, I see this error message in the console:

Warning: You are importing createRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client".

I'm not sure what to change in my script tags since I'm using the suggested CDN links. I would have thought a file called react-dom-client.development.js would exist, but I don't see it:

https://unpkg.com/browse/[email protected]/cjs/

Any suggestions?



Solution 1:[1]

You can ignore this warning. A fix is coming: https://github.com/facebook/react/issues/24292#issuecomment-1091690844

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Boris D.