修复 React 中 createRoot(...): Target container is not a DOM element 错误

当前位置：主页 > 学无止境 > WEB前端 > React >

Vue React JavaScript Angular CSS HTML

修复 React 中 createRoot(...): Target container is not a DOM element 错误

作者：迹忆客最近更新：2023/01/08 浏览次数：

出现错误“createRoot(...): Target container is not a DOM element”有多种原因：

将不正确的 id 传递给 document.getElementById() 方法。
将 React 脚本文件放在创建 div 元素的代码之上。
错误配置 webpack 的 index.html 文件。

下面是产生该错误的示例。

import {StrictMode} from 'react';
import {createRoot} from 'react-dom/client';

import App from './App';

// 👇️ 给 getElementById() 方法传了一个错误的ID
const rootElement = document.getElementById('wrong-id');
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>,
);

我们向 getElementById 方法传递了一个错误的 ID，因此我们最终向导致错误的 createRoot() 方法传递了一个空值。

要解决“createRoot(...): Target container is not a DOM element”错误，请确保用于选择元素的 ID 与你在 index.html 文件中指定的 ID 相同，并将 React 脚本放在声明 div 元素的代码下方。

<!DOCTYPE html>
<html lang="en">
  <body>
    <!-- 必须和 index.js 匹配 -->
    <div id="root"></div>
  </body>
</html>

示例中 index.html 文件中的 ID 是 root，因此我们在 index.js 中选择根元素时必须使用它。

import {StrictMode} from 'react';
import {createRoot} from 'react-dom/client';

import App from './App';

// ✅ correct ID passed
const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>,
);

该错误的另一个常见原因是将 React.js 脚本文件放在 index.html 文件中创建 div 元素的代码之上。

<!DOCTYPE html>
<html lang="en">
  <body>
    <!-- ⛔️ BAD: script runs before div is created  -->
    <script src="/bundle.js"></script>

    <div id="root"></div>
  </body>
</html>

bundle.js 脚本在创建导致错误的 div 元素之前运行。

相反，将我们的脚本标记放在声明 div 元素的代码下方。

<!DOCTYPE html>
<html lang="en">
  <body>
    <div id="root"></div>

    <!-- ✅ GOOD: div already exists  -->
    <script src="/bundle.js"></script>
  </body>
</html>

该错误的另一个常见原因是使用 webpack 时 html-webpack-plugin 配置不正确。

使用 webpack 时，我们可以使用模板选项提供自定义 HTML 文件。 html-webpack-plugin 会自动将所有必要的 CSS、JS、manifest 和 favicon 文件注入到标记中。

首先更新 webpack 配置文件的 plugins 部分，提供自定义 html 文件的路径。

webpack.config.js

plugins: [
    new HtmlWebpackPlugin({
      title: "Your custom title",
      template: './src/index.html'
    })
],

并使用以下代码在您的 src 目录中创建一个 index.html 文件。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <!-- 👇️ must match the id in your index.js file  -->
    <div id="root"></div>
  </body>
</html>

现在我们的 index.js 文件应该选择 ID 为 root 的元素。

import {StrictMode} from 'react';
import {createRoot} from 'react-dom/client';

import App from './App';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>,
);