Question

我使用React在Nodejs中开发了一个Web应用程序（差不多15-20页）。我使用的是Webpack bundler。每一件事都很好，但我的问题细节：我做了一个公共文件（bundle.js）的所有页面反应代码。当我编译它并运行它。它显示我在控制台中的错误消息is._registerComponent（...）：目标容器不是DOM元素。我知道它是反应错误，因为它无法找到具有Id的div，它在bundle.js中用于index.html（主页）上的另一个页面。所以任何身体帮助我在这里为我提供有关我的问题的指南。这是处理这种情况的最佳方式。为每个页面或任何其他方式使用相同的捆绑文件为每个页面解决此问题并解决此问题。如果有任何方法解决这个问题请在这里提供给我。谢谢我的代码在这里： webpack.config.js

var path = require('path');
var webpack = require('webpack');
module.exports = {
    entry: './main.js',
    output: { path: path.join(__dirname, './js/'), filename: 'bundle.js' },
    module: {
        loaders: [
            { test: /jquery[\\\/]src[\\\/]selector\.js$/, loader: 'amd-define-factory-patcher-loader' },
            {
                test: /.jsx?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['es2015', 'react']
                }
            },
            { test: /\.css$/, loader: "style-loader!css-loader" },
            { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' },
        ]
    }
};

main.js

import 'jquery/src/jquery/';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap.js';

/*****************  React Components Here  *****************/
import './src/browser/HomeComponent.js';//this is use for homepage component

import './src/browser/LoginComponent.js';//this is use for loginpage component

的index.html

<!DOCTYPE html>
<html lang="en">
<head>
    ...
</head>
<body>
<div id="home" ></div>
<script type="text/javascript" src="js/bundle.js"></script>
</body>
</html>

React Webpack _registerComponent（...）：目标容器不是DOM元素

0 个答案: