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 / client / app /中添加index.js文件，并确保从＆＃39; react-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'));

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

1 个答案: