React simple code error: Target container is not a DOM element

Question

我正在现有应用程序中实施 react.js。

我刚刚添加了 webpack 和一个简单的 App 组件来初步检查它是如何工作的，但出现错误：

Target container is not a DOM element.

正如控制台中所说：

Error: Minified React error #200; visit https://reactjs.org/docs/error-decoder.html?invariant=200 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

导致上述消息为错误 #200。

观点很简单：

<script src="~/dist/index.js"></script>
<div id="root"></div>

和组件：

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

const App = () => <div>Hello world!</div>;

ReactDOM.render(<App />, document.getElementById("root"));

webpack只是简单的设置：

const path = require("path");

module.exports = {
    entry: {
        index: "./app/index.js"
    },
    output: {
        path: path.resolve(__dirname, "../dist"),
        filename: "[name].js"
    },
    module: {
        rules: [
            {
                use: {
                    loader: "babel-loader"
                },
                test: /\.js$/,
                exclude: /node_modules/ //excludes node_modules folder from being transpiled by babel. We do this because it's a waste of resources to do so.
            }
        ]
    }
}

我错过了什么？

Answer 1

Target container is not a DOM element.

<script src="~/dist/index.js"></script>
<div id="root"></div>

捆绑脚本 运行 在您附加到的 div 呈现之前。只需在 div:

之后重新排序脚本元素

<div id="root"></div>
<script src="~/dist/index.js"></script>