错误：目标容器不是 React 的 DOM 元素

发布于 2025-01-18 04:18:32 字数 1382 浏览 0 评论 0原文

我已经制作了此React应用程序，但我一直遇到此错误：

未被发现的错误：createroot（...）：目标容器不是DOM元素。

有人可以帮我吗？这是我的index.html和index.js。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>

  </body>
</html>

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

ReactDOM.createRoot(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

reportWebVitals();

我已经尝试了上传到Internet的所有可能解决方案，但不幸的是，它们尚未起作用。

原文

I've made this React app but i keep getting this error:

Uncaught Error: createRoot(...): Target container is not a DOM element.

Can someone help me please? This is my index.html and index.js.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>

  </body>
</html>

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

ReactDOM.createRoot(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

reportWebVitals();

I've already tried every possible solutions that are uploaded to the internet, but unfortunately non of them hasn't worked yet.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

莫多说 2025-01-25 04:18:32

作为 docs say ，签名是

ReactDOM.createRoot(rootNode).render(<App />);

：

ReactDOM.render(<App />, rootNode)

因此，您需要将代码更改为

ReactDOM.createRoot(
  document.getElementById("root"),
)
.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

As the docs say, the signature is:

ReactDOM.createRoot(rootNode).render(<App />);

And it replaces:

ReactDOM.render(<App />, rootNode)

So you need to change your code to

ReactDOM.createRoot(
  document.getElementById("root"),
)
.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);

回复收藏 0 原文

灰色世界里的红玫瑰 2025-01-25 04:18:32

我遇到了同样的错误，此页面帮助我修复了它：
https://www.sharooq.com/solved -createroot-target-container-is-not-a-dom-element

可能您对 document.getElementById("root") 的调用发生在页面完成 DOM 设置之前。尝试将您的代码移至：

window.addEventListener("DOMContentLoaded", function (e) {
    ReactDOM.createRoot(...)
});

I had this same error, and this page helped me fix it:
https://www.sharooq.com/solved-createroot-target-container-is-not-a-dom-element

Probably your call to document.getElementById("root") is happening before the page has finished setting up the DOM. Try moving your code into:

window.addEventListener("DOMContentLoaded", function (e) {
    ReactDOM.createRoot(...)
});

回复收藏 0 原文

痴梦一场 2025-01-25 04:18:32

从反应文档， https://17.reactjs.org/docs /concurrent-mode-reference.html#createroot

Replace this line of your code

ReactDOM.createRoot(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

代码行使用此代码

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

这应该可以修复错误。

from the react documentation, https://17.reactjs.org/docs/concurrent-mode-reference.html#createroot

Replace this line of your code

ReactDOM.createRoot(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

line of your code with this code

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

This should fix the error.

回复收藏 0 原文

迷乱花海 2025-01-25 04:18:32

我遇到了这个问题，这是出于愚蠢的原因。我意外地交换了index.js，因此它在创建我的div id =“ root”之前就运行了。因此，目前React正在寻找DOM确实不存在。

说明性示例：

<!DOCTYPE html>
<html>
  <body>
    // WRONG! React tries to access the DOM before it is loaded.
    <script src="./index.js"></script>
    <div id="root"></div>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    // RIGHT! React will access the DOM after it is loaded.
    <div id="root"></div>
    <script src="./index.js"></script>
  </body>
</html>

I ran into this problem for an extremely silly reason. I accidentally swapped index.js around so it ran before my div id="root" was created. So the DOM truly didn't exist at the moment react was looking for it.

Illustrative examples:

<!DOCTYPE html>
<html>
  <body>
    // WRONG! React tries to access the DOM before it is loaded.
    <script src="./index.js"></script>
    <div id="root"></div>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    // RIGHT! React will access the DOM after it is loaded.
    <div id="root"></div>
    <script src="./index.js"></script>
  </body>
</html>

回复收藏 0 原文

深空失忆 2025-01-25 04:18:32

对我来说，问题是 dom 遍历触发得太早，以至于无法正确找到该元素。

使用 defer 加载脚本为我解决了这个问题：

= javascript_pack_tag 'index', defer: true

您可以了解更多关于为什么这通常也是一个好主意此处。

For me the issue was, that the dom traversal was triggered too early, such that it could not find that element correctly.

Loading the script with defer fixed it for me:

= javascript_pack_tag 'index', defer: true

You can learn more on why this also generally a good idea here.

回复收藏 0 原文

表情可笑 2025-01-25 04:18:32

我遇到了同样的问题，但我也在 index.html 文件中包含了

回复收藏 0 原文

池木 2025-01-25 04:18:32

使用最新的 React 版本，您可以按如下方式渲染组件：

const root = ReactDOM.createRoot(document.querySelector('#root'));

root.render (
 <React.StrictMode>
    <App/ >
 <React.StrictMode>
)

With the latest React version, you can render your component as follows:

const root = ReactDOM.createRoot(document.querySelector('#root'));

root.render (
 <React.StrictMode>
    <App/ >
 <React.StrictMode>
)

回复收藏 0 原文

听你说爱我 2025-01-25 04:18:32

我遇到了同样的问题，我通过在webpack.config.js中添加模板配置来修复它。

`plugins: [new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'public', 'index.html')
    })],`

I had the same issue and i had fixed it by adding template configuration in HtmlWebpackPlugin in webpack.config.js

`plugins: [new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'public', 'index.html')
    })],`

回复收藏 0 原文

风追烟花雨 2025-01-25 04:18:32

我由于不同的原因得到了同样的错误。

就我而言，index.html 中的 div id 与 index.js 中指定的 id 不匹配。

索引.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My app</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

索引.js:

import React, { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App";

// a div with this id needs to actually exist in the index.html
const container = document.getElementById("root");

const root = createRoot(container);

export default function Index() {
  return (
    <StrictMode>
      <App />
    </StrictMode>
  );
}

root.render(<Index />);

I got the same error for a different reason.

In my case, there was a mismatch between the id of the div in my index.html and the id specified in my index.js.

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My app</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

index.js:

import React, { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App";

// a div with this id needs to actually exist in the index.html
const container = document.getElementById("root");

const root = createRoot(container);

export default function Index() {
  return (
    <StrictMode>
      <App />
    </StrictMode>
  );
}

root.render(<Index />);

回复收藏 0 原文

~没有更多了~