React报错：createRoot目标容器非DOM元素，求解决方案

我正在学习React，通过HTML的script标签引入React相关库，编写了对应的index.html和index.js代码。运行时出现Minified React error #299，解码后提示createRoot(...): Target container is not a DOM element，查阅文档后未发现问题，希望得到解决办法。

我的代码 #

index.html #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MyWebsitewithReact</title>
    <link rel="stylesheet" href="css/main.css">
    <meta name="theme-color" content="#2e2e2e">
</head>
<body>
    <div class="navbar">
        <a href="#">Home</a>
        <a href="developer/">Plugins</a>
    </div>
    <div id="root"></div>
    <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script src="js/index.js"></script>
</body>
</html>

index.js #

'use strict';

function LikeButton() {
    const [liked, setLiked] = React.useState(false);

    if (liked) {
        return 'You liked this!';
    }

    return React.createElement(
        'button',
        {
            onClick: () => setLiked(true),
        },
        'Like'
    );
}

const rootNode = document.getElementById('root');
const root = ReactDOM.createRoot(rootNode);
root.render(React.createElement(LikeButton));

报错信息 #

Error: Minified React error #299; visit https://reactjs.org/docs/error-decoder.html?invariant=299 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

解码后内容：

createRoot(...): Target container is not a DOM element

解决办法 #

错误核心 #

这个错误是因为document.getElementById('root')未找到对应的DOM元素，返回了null，导致ReactDOM.createRoot()无法接收合法的DOM节点。

排查步骤 #

1. 检查JS文件路径
   确认index.js是否真的位于js/子目录下。如果你的项目中index.js和index.html在同一层级，需要修改HTML中的script标签路径：

   <script src="index.js"></script>
   

   可通过浏览器开发者工具的「网络」面板查看index.js的加载状态，若显示404则说明路径错误。

2. 验证DOM元素拼写
   确保HTML中根元素的id为root，且JS中getElementById('root')的拼写完全一致（注意大小写敏感），避免因拼写错误导致元素查找失败。

3. 调试DOM获取结果
   在index.js开头添加日志，确认是否能获取到DOM元素：

   const rootNode = document.getElementById('root');
   console.log(rootNode);
   

   如果控制台输出null，则说明确实未找到目标元素。

4. 临时测试方案
   将index.js的代码直接嵌入HTML的script标签中，排除路径问题：

   <script type="text/javascript">
   'use strict';
   
   function LikeButton() {
       const [liked, setLiked] = React.useState(false);
   
       if (liked) {
           return 'You liked this!';
       }
   
       return React.createElement(
           'button',
           {
               onClick: () => setLiked(true),
           },
           'Like'
       );
   }
   
   const rootNode = document.getElementById('root');
   const root = ReactDOM.createRoot(rootNode);
   root.render(React.createElement(LikeButton));
   </script>
   

   若此方式能正常运行，则说明原index.js的路径存在问题。

内容的提问来源于stack exchange，提问作者Paolo