VSCode Live Server运行React17项目报Target container is not a DOM element如何解决

错误原因 #

Uncaught Error: Target container is not a DOM element 错误的核心触发逻辑是：React执行挂载操作时，没有在当前页面DOM树中找到你指定的挂载容器节点。

对应你的项目场景，具体原因如下：

• 你的HTML文件<body>标签内仅引入了样式、各类脚本资源，没有添加React需要的挂载容器节点，你参考的示例代码默认会查找id="root"的DOM节点作为挂载目标
• 即使你将script放在了body底部，执行JS逻辑时依然找不到对应的容器，所以会持续抛出该错误

解决方法 #

1. 首先在HTML的<body>标签中添加React挂载容器，位置放在所有script标签之前即可，修改后的完整HTML代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>React Tutorial</title>
    </head>
    <body>
        <link rel="stylesheet" type="text/css" href="index.css">
        <!-- 新增React挂载容器 -->
        <div id="root"></div>
        <script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>
        <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
        <script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
        <script type="text/babel" src="./index.js"></script>
    </body>
</html>

2. 检查index.js中ReactDOM挂载代码的选择器是否和你定义的容器id一致，确保格式如下：

// 注意第二个参数的id要和HTML中定义的容器id完全匹配
ReactDOM.render(
  <你的根组件 />,
  document.getElementById('root')
)

以上操作完成后重启VSCode Live Server即可正常运行。

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