Question

我的错误之前已经解决了很多次，但是没有一种解决方案有效。到目前为止，最接近的问题是this，是由用户iphonic提出的，但是其解决方案也不起作用。

像iphonic一样，我已经尝试过

将脚本元素放置在<body>元素的底部，我也尝试将其放置在<body>元素之后但结尾</html>之前，但是它仍然不起作用。
在async元素中使用defer和<script>标志
在type="text/jsx"元素中添加<script>或type="javascript"可以避免错误，但是即使有错误，“ Res”组件也不会在页面上呈现控制台上没有错误。

这是我的代码：

results.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>

results.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）

评估时（index.jsx：119）

在Module ../ src / index.jsx（bundle.js：5336）

在__webpack_require__（bundle.js：20）

评估时（index.jsx：1）

在Object.0（bundle.js：5347）

在__webpack_require__（bundle.js：20）

在bundle.js：84

未捕获的错误：目标容器不是DOM元素，否则React组件将无法呈现

0 个答案: