时间戳

首页 > 解决方案 > React 简单代码错误：目标容器不是 DOM 元素

reactjs - React 简单代码错误：目标容器不是 DOM 元素

问题描述

我正在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.
            }
        ]
    }
}

我错过了什么？

标签： reactjswebpackbabel-loader

解决方案

Target container is not a DOM element.

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

捆绑的脚本在您附加到的 div 被渲染之前运行。只需在 div 之后重新排序 script 元素：

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

推荐阅读