我是新手。
我的错误是:
Uncaught Error: Target container is not a DOM element
我已经用谷歌搜索了很多次并找到了有这个错误的人:
Uncaught Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element.
我的不包含:
_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> 之前.但是我没有做这些，所以我不知道问题是什么。
最佳答案
我在这里参加派对肯定有点晚了，但我想为那些想要使用 webpack-dev-middleware 的人发布一个答案。而不是规避它。
对我来说，问题是 webpack-dev-middleware 的基本设置使用 html-webpack-plugin 在 webpack 文档中显示使用默认配置。此插件动态生成一个新的 index.html与您的 bundle.js 一起归档保存时，即使我写了一个 index.html包含 <div id="root"></div> 的文件，那不是提供给浏览器的那个。我能够通过运行 /node_modules/.bin/webpack 来验证这一点并在我的公共(public)路径目录中查看输出。
我的解决方案如下:
在 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>
更多信息可以在这里找到:
关于javascript - react - Uncaught Error : Target container is not a DOM element，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47161515/