webpack+react打包出错-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

webpack+react打包出错

高洛峰 2016-11-15 17:05:30

[HTML讨论组]

969

这是入口文件（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.
我注释掉一个，就会运行正常，两个不同页面的组件不能放到一个入口文件里面吗
还请大神指教这是什么错误，该怎么解决呢：

高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。网络人气名人讲师，...

全部回复(2)

欧阳克2016-11-15 17:06:04 2楼

你网上看到的绝大部分webpack+react的教程都是动态的把生成的文件插入到html文件里的，所以你肯定指定了一个html文件，于是那个html里面要不就只有id为rank-lish的某个div（假设你用的div），要不就只有id为login-container的div

你发现undefined一类的错误的时候不尝试console.log一下你使用的资源吗？

赞 +0

添加回复

三叔2016-11-15 17:05:50 1楼

你的rank-list、login-container分别在不同的页面，所以总会出现 document.getElementById(xxx) 为 undefined 的情况，往 undefined 里渲染肯定会出错了。

你在每一个 render 前加一个判空就行。如:

if (document.getElementById('rank-list')) {
    ReactDOM.render(,document.getElementById('rank-list'));
}

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>