时间戳

首页 > 解决方案 > 未捕获的错误：目标容器不是 DOM 元素或 React 组件不会呈现

javascript - 未捕获的错误：目标容器不是 DOM 元素或 React 组件不会呈现

问题描述

我的错误之前已多次解决，但没有一个解决方案有效。到目前为止，最接近的问题是用户 iphonic 提出的这个问题，但它的解决方案也不起作用。

像 iphonic 一样，我试过了

  1. 将脚本元素放在元素的底部<body>，我也尝试将它放在<body>元素之后但在结束</html>标记之前，但它仍然不起作用。

  2. 在元素中使用defer和标志async<script>

  3. 在元素中添加type="text/jsx"or可以消除错误，但“Res”组件不会在页面上呈现，即使控制台上没有错误也是如此。type="javascript"<script>

这是我的代码：

结果.html：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Results</title>
</head>

<body">
    <div id="res" ></div>
    <script type="text/jsx" src="../static/bundle.js"></script>
</body>
</html>

结果.jsx：

import React from "react";
import ReactDOM from "react-dom";

import "../templates/results.html";

ReactDOM.render(
  <div>
    <h1>Hello World!</h1>
  </div>,
  document.getElementById("res")
);

webpack.config.js：

module.exports = {
  entry: ["./src/index.jsx"],
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ["babel-loader"]
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      }
    ]
  },
  output: {
    path: __dirname + "/static",
    filename: "bundle.js",
    publicPath: "/"
  }
};

这是完整的错误：

未捕获的错误：目标容器不是 DOM 元素。

在不变（react-dom.development.js:55）

在 legacyRenderSubtreeIntoContainer (react-dom.development.js:19532)

在 Object.render (react-dom.development.js:19613)

在 eval (index.jsx:119)

在 Module../src/index.jsx (bundle.js:5336)

在 __webpack_require__ (bundle.js:20)

在 eval (index.jsx:1)

在 Object.0 (bundle.js:5347)

在 __webpack_require__ (bundle.js:20)

在 bundle.js:84

标签： javascripthtmlreactjswebpack

解决方案

推荐阅读