Question

我很反应。

我的错误是：

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

我用Google搜索了很多次，找到了有这个错误的人：

未捕获错误：不变违规：_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>之前。然而，我不会做这些，所以我不知道问题是什么。

Answer 1

感谢Axnyff的帮助，因为它解决了我的问题。问题在于我使用的依赖关系，webpack-dev-middleware。

Answer 2

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

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

我的解决方法如下：

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

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

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

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

可以在此处找到更多信息：

React - Uncaught Error：目标容器不是DOM元素

2 个答案: