javascript React - 未捕获的错误:目标容器不是 DOM 元素

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/47161515/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-29 07:14:02  来源:igfitidea点击:

React - Uncaught Error: Target container is not a DOM element

javascripthtmlreactjswebpackjsx

提问by Edward

I'm new to react.

我是新来的反应。

My error is:

我的错误是:

Uncaught Error: Target container is not a DOM element

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

I've Googled this plenty of times and find people who have this error:

我在谷歌上搜索了很多次,发现有这个错误的人:

Uncaught Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element.

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

Mine doesn't contain:

我的不包含:

_registerComponent(...):

_registerComponent(...):

Here are my files:

这是我的文件:

index.html

索引.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

索引.jsx

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

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

webpack.config.js

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')
        ]
    }
};

The most common issue I found people were having with this error is that they put <script>in the head or before the <div>. Yet I don't do neither of these so I have no idea what the problem is.

最常见的问题,我发现人们用这个错误有是,他们把<script>在头部或之前<div>。然而我不做这些,所以我不知道问题是什么。

采纳答案by Edward

Thanks to Axnyff for his help as it resolved my question. The problem was with a dependency I was using, webpack-dev-middleware.

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