已解决：createRoot(): Target container is not a DOM element

已解决：createRoot(): 目标容器不是 DOM 元素

Solved: createRoot(): Target container is not a DOM element

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

将错误传递id给document.getElementById()方法。
将反应脚本文件放在创建元素的代码之上div。
错误地配置 Webpack 的index.html文件。

createroot 目标容器不是 dom 元素

将正确的 ID 传递给 document.getElementById()

下面是错误如何发生的示例。

索引.js


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

import App from './App';

// 👇️ passed wrong ID to getElementById() method
const rootElement = document.getElementById('wrong-id');
const root = createRoot(rootElement);

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

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

要解决该错误，请确保您用于选择元素的 ID 与您在文件中指定的 ID 相同，index.html并将 React 脚本放在声明该div元素的代码下方。

公共/index.html


<!DOCTYPE html>
<html lang="en">
  <body>
    <!-- 👇️ must match with index.js  -->
    <div id="root"></div>
  </body>
</html>

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

索引.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 脚本标签放在 body 标签的底部

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

公共/index.html


<!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。

公共/index.html


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

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

正确配置 html-webpack-plugin

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

您可以使用该template选项在使用 Webpack 时提供自定义 HTML 文件。html
-webpack-plugin会自动将所有必要的 CSS、JS、清单和网站图标文件注入到标记中。

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

webpack.config.js


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

并使用以下代码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.

索引.js


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>,
);

该createRoot()方法将根元素作为参数并创建 React 根。

root 有一个render()方法可以用来将 React 元素渲染到 DOM 中。React 中的根是指向顶级数据结构的指针，React 使用该数据结构来跟踪要渲染的树。

确保createRoot从react-dom/client.
不支持从 react-dom 导入它。