React createRoot函数报错：Target container is not a DOM element 求助

可能的原因及对应解决方案 #

1. 脚本执行早于DOM加载 #

你的JS代码可能在<div id="root">元素渲染前就执行了，导致document.getElementById('root')返回null。

解决方法：

• 把引入React入口文件的<script>标签放到HTML的<body>末尾，确保DOM元素先加载：

<body>
  <div id="root"></div>
  <!-- 脚本放在root元素之后 -->
  <script type="module" src="/src/index.js"></script>
</body>

• 或者给<script>标签添加defer属性，让脚本等待DOM加载完成后再执行：

<head>
  <script type="module" src="/src/index.js" defer></script>
</head>
<body>
  <div id="root"></div>
</body>

2. 包裹代码在DOM加载完成事件中执行 #

如果无法调整脚本位置，可将React渲染代码包裹在DOMContentLoaded事件监听里，确保DOM完全加载后再执行：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';
import './index.css';

document.addEventListener('DOMContentLoaded', () => {
  const rootEl = document.getElementById('root');
  if (rootEl) {
    ReactDOM.createRoot(rootEl).render(
      <React.StrictMode>
        <App />
      </React.StrictMode>
    );
  }
});

3. 检查DOM结构异常 #

• 确认HTML中id="root"的元素唯一，没有重复的id导致获取错误元素。
• 检查是否有其他脚本在React执行前删除或修改了root元素。

4. 脚手架配置问题 #

如果使用Vite、Create React App等脚手架：

• 检查index.html中root元素的位置是否正确，确保没有被误删或修改。
• 确认脚手架的入口配置指向正确的JS文件，没有路径错误。

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