webpack+react打包出错

Question

这是入口文件（main.js）

entry: './app/main.js',

output: {

    path: __dirname + '/build',

    filename: 'bundle.js'

},

这是main里面的内容：

var React = require('react');

var ReactDOM = require('react-dom');

var ProductCss = require('./css/product.css');

require('./css/product.css');

var AppComponent = require('./components/login.js');

var RankList=require('./components/ranking.js');

ReactDOM.render(<RankList />,document.getElementById('rank-list'));

ReactDOM.render(<AppComponent />, document.getElementById('login-container'));

这两个组件是不同的两个html页面（login.html,ranking.html）;

现在问题是页面上会报下面这个错：

Uncaught Invariant Violation: _registerComponent(...): Target container is not a DOM element.

我注释掉一个，就会运行正常，两个不同页面的组件不能放到一个入口文件里面吗

还请大神指教这是什么错误，该怎么解决呢：

Answer 1

你的rank-list、login-container分别在不同的页面，所以总会出现&nbsp;document.getElementById(xxx)&nbsp;为 undefined 的情况，往 undefined 里渲染肯定会出错了。你在每一个 render 前加一个判空就行。如:if&nbsp;(document.getElementById('rank-list'))&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;ReactDOM.render(<RankList&nbsp;/>,document.getElementById('rank-list')); }