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

Z时代
2024-01-10
分类：综合

出现错误“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';
importAppfrom'./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>
<htmllang="en">
<body>
<!-- 必须和 index.js 匹配 -->
<divid="root"></div>
</body>
</html>

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


import {StrictMode} from'react';
import {createRoot} from'react-dom/client';
importAppfrom'./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>
<htmllang="en">
<body>
<!-- ⛔️ BAD: script runs before div is created  -->
<scriptsrc="/bundle.js"></script>
<divid="root"></div>
</body>
</html>

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

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


<!DOCTYPE html>
<htmllang="en">
<body>
<divid="root"></div>
<!-- ✅ GOOD: div already exists  -->
<scriptsrc="/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: [
newHtmlWebpackPlugin({
title: "Your custom title",
template: './src/index.html'
    })
],

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


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

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


import {StrictMode} from'react';
import {createRoot} from'react-dom/client';
importAppfrom'./App';
const rootElement = document.getElementById('root');
const root = createRoot(rootElement);
root.render(
<StrictMode>
<App />
</StrictMode>,
);