React项目报createRoot目标容器非DOM元素错误排查

问题场景 #

• 基础React项目此前运行完全正常，新增类组件文件并引入后出现异常，即使回退代码，报错仍然存在
• 控制台固定报错：Uncaught Error: createRoot(...): Target container is not a DOM element.
• 已确认public目录下index.html中存在id为root的DOM节点，且从未修改过该文件
• 已尝试单独渲染新增的VideoBg组件等调试手段，问题未解决

相关代码 #

入口文件index.js #

import React from "react";
import { createRoot } from 'react-dom/client'
import {
  BrowserRouter,
  Routes,
  Route,
} from "react-router-dom";

import Home from "./Home";
import Games from "./Games";

const root = createRoot(document.getElementById('root'))
root.render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="games" element={<Games />} />
    </Routes>
  </BrowserRouter>
);

index.html文件 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <link rel="icon" href="%PUBLIC_URL%/images/favicon.ico" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap" rel="stylesheet">
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

新增的Home.jsx文件 #

报错在新增该文件后首次出现：

import React, { Component } from 'react';
import VideoBg from './Components/VideoBg';

class Home extends Component {
  render() { 
    return (
      <React.Fragment>
        <VideoBg />
      </React.Fragment>
    );
  }
}
 
export default Home;

VideoBg.jsx核心代码 #

文件其余部分为基础导入导出逻辑，无特殊配置：

render() {
    return (
      <React.Fragment>
        <video autoplay loop id="VideoBg">
          <source src={this.getDay}></source>
        </video>
      </React.Fragment>
    );
  }

问题原因&排查方案 #

这个报错的核心触发逻辑是执行createRoot()时，代码没有获取到id为root的DOM节点，和Home、VideoBg组件的渲染逻辑本身没有直接关联，按以下优先级排查即可：

• 检查脚本加载顺序：确认打包后的js脚本引用没有被放到<head>标签内，且没有缺失defer属性。如果脚本在head中执行，此时body内的<div id="root"></div>还未被解析到DOM树，document.getElementById('root')会返回null直接触发报错。把脚本引用挪到</body>标签前、root节点的后面就能解决。
• 排查模块循环引用：检查新增的组件文件有没有出现循环引入问题，比如VideoBg.jsx反过来错误引入了Home.jsx或者入口index.js，会导致模块加载时序错乱，入口脚本执行中断，最终表现为拿不到root节点。可以逐行注释新增的import语句，定位到循环引用的位置修正即可。
• 检查文件路径大小写：部分打包工具、Linux部署环境对文件路径大小写敏感，如果引入组件时路径大小写和实际文件名不匹配（比如写了./videobg但实际文件名为VideoBg.jsx），会导致模块加载失败，打断入口脚本执行流程，抛出和当前一致的错误。
• 检查组件顶层逻辑：确认VideoBg组件有没有在类的最外层（非render、非生命周期函数内）直接写DOM操作、全局变量调用的代码，这类代码在组件导入阶段就会执行，如果执行报错会直接中断整个入口脚本的运行，在createRoot步骤抛出异常。

补充：VideoBg组件里的autoplay属性在JSX中需要写成驼峰格式autoPlay，这个问题只会导致视频无法自动播放，不会触发当前的容器错误，可以后续调整。

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