Реакция простой ошибки кода: целевой контейнер не является элементом DOM - PullRequest
Новая
       12

Реакция простой ошибки кода: целевой контейнер не является элементом DOM

0 голосов
/ 26 февраля 2020

Я внедряю 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"));

У веб-пакета просто простая настройка: 

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.
            }
        ]
    }
}

Чего мне не хватает?

1 Ответ

0 голосов
/ 26 февраля 2020

Target container is not a DOM element.

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

Связанный скрипт был запущен до того, как div, к которому вы подключаетесь, был отрендерен. Просто измените порядок элемента script после div: 

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