web-dev-qa-db-fra.com

React - Erreur non interceptée: le conteneur cible n'est pas un élément DOM

Je suis nouveau pour réagir.

Mon erreur est:

Erreur non interceptée: le conteneur cible n'est pas un élément DOM

J'ai googlé cela de nombreuses fois et j'ai trouvé des gens qui ont cette erreur:

Erreur non interceptée: violation invariante: _registerComponent (...): le conteneur cible n'est pas un élément DOM.

Le mien ne contient pas:

_registerComponent (...):

Voici mes fichiers:

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

Le problème le plus courant rencontré par les utilisateurs avec cette erreur est qu'ils ont mis <script> dans la tête ou avant le <div>. Pourtant, je ne fais rien de tout cela, donc je n'ai aucune idée du problème.

javascripthtmlreactjswebpackjsx
10
Edward

Merci à Axnyff pour son aide car cela a résolu ma question. Le problème venait d'une dépendance que j'utilisais, webpack-dev-middleware.

2
Edward