如何修复：未捕获的错误：_registerComponent（...）：目标容器不是DOM元素

Question

当我编译并运行我的Webpack应用程序时，我一直在抛出这个错误。任何人都有一个想法是什么导致它。我曾尝试在脚本标记之前添加<div id="root"></div>，但没有解决问题。我正在使用webpack版本3.3.0。 谢谢。这是我的webpack.config文件。

var webpack = require('webpack'); 
var path = require('path'); 
var react = require('react'); 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 

var BUILD_DIR = path.resolve(__dirname, 'public'); 
var APP_DIR = path.resolve(__dirname, 'src/client/app'); 

var config = { 
    entry: APP_DIR + '/index.js', 
    output: { 
    path: BUILD_DIR, 
    filename: 'bundle.js' 
    }, 
    module: { 
    rules: [{ 
     test: /\.js?$/, 
     include: path.resolve(__dirname, 'src'), 
    exclude: [/node_modules/], 
    use: [{ 
     loader: "babel-loader", 
     options: { 
        presets: ["stage-0","es2015","react"], 
        plugins: ["transform-class-properties", "react-html-attrs"] 
       } 

    }] 
}, 
{ 
test: /\.css?$/, 
use: ['style-loader', 'css-loader'], 
}, 
{ 
    test: /\.html?$/, 
    use: [ 
    "htmllint-loader", 
    { 
    loader: "html-loader", 
     options: {} 
    } 
    ] 
    }], 

}, 
    devServer: { 
    contentBase: path.join(__dirname, "public"), 
    compress: true, 
    port: 9000 
}, 
plugins: [new HtmlWebpackPlugin({ 
      title: 'My Project', 
     filename: 'main.html' 
    })] 
} 

module.exports = config; 

Answer 1

添加在SRC /客户/应用index.js文件/并确保你从“反应-DOM有进口ReactDom;

import React, { Component } from 'react'; 
import ReactDOM from 'react-dom'; 

class App extends Component{ 
    render(){ 
    return(
    <div> 
     <h1>Hello App</h1> 
    </div> 
    ) 
    } 
} 
ReactDOM.render(<App />, document.getElementByID('root'));