React - 未捕获的错误：目标容器不是 DOM 元素答案

【问题标题】：React - Uncaught Error: Target container is not a DOM elementReact - 未捕获的错误：目标容器不是 DOM 元素
【发布时间】：2018-04-20 01:35:34
【问题描述】：

我是新手。

我的错误是：

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

我已经用谷歌搜索了很多次，发现有这个错误的人：

未捕获的错误：不变违规：_registerComponent(...)：目标容器不是 DOM 元素。

我的不包含：

_registerComponent(...):

这是我的文件：

index.html

<html>
<head>

    <meta charset="utf-8">
    <title>React</title>

</head>
<body>

    <div id="root"></div>
    <script src="./bundle.js"></script>

</body>
</html>

index.jsx

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

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

webpack.config.js

const path = require('path');

module.exports = {
    context: path.join(__dirname, 'src'),
    entry: './index.jsx',
    output: {
        path: path.join(__dirname, 'public'),
        filename: './bundle.js'
    },
    module: {
        loaders: [
            { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
            { test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ },
        ],
    },
    resolve: {
        modules: [
            path.join(__dirname, 'node_modules')
        ]
    }
};

我发现人们遇到此错误的最常见问题是他们将<script> 放在头部或<div> 之前。然而我没有做这些，所以我不知道问题是什么。

【问题讨论】：

不要把它放在body标签里面，你能不能试着在像这样关闭html标签之前把它放在body外面

标签： javascript html reactjs webpack jsx

【解决方案1】：

我在这里聚会肯定有点晚了，但想为那些想要使用webpack-dev-middleware而不是绕过它的人发布答案。

对我来说，问题是 webpack-dev-middleware 的基本设置显示在 webpack 文档中，使用 html-webpack-plugin 和默认配置。这个插件在保存时动态生成一个新的index.html 文件和你的bundle.js，所以即使我写了一个包含<div id="root"></div> 的index.html 文件，它也不是提供给浏览器的那个文件。我可以通过运行/node_modules/.bin/webpack 并查看我的公共路径目录中的输出来验证这一点。

我的解决方法如下：

在 WebpackHtmlPlugin 的声明中添加配置对象：

plugins: [
    new HtmlWebpackPlugin({
      title: "boilerplate",
      template: path.join(__dirname, "pathto", "template.html"),
      inject: "body",
    }),
  ],

（设置模板文件的标题、位置，并指示html-webpack-plugin将所有脚本标签推送到生成文件的body元素底部。）模板如下：

<!DOCTYPE html>
<html lang="en">

<head>
  
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title><%= htmlWebpackPlugin.options.title %></title>
</head>

<body>
  <div id="root"></div>
</body>

</html>

更多信息可以在这里找到：

【讨论】：

【解决方案2】：

感谢 Axnyff 帮助解决了我的问题。问题出在我使用的依赖项 webpack-dev-middleware 上。

【讨论】：