![](/img/trans.png)
[英]Webpack + React router dynamic routing - how to catch require loading exception with require.ensure
[英]How to fix require.ensure error Webpack, Babel6, React?
我试图使用require.ensure为Facility.js创建一个块
import React, { Component } from 'react';
import { render } from 'react-dom';
class Facility extends Component {
constructor(...args) {
super(...args);
this.state = {
....
};
}
render() {
return (
<div>
....
</div>
);
}
}
export default Facility;
//Tried module.exports = Facility;
NonPatientSer.js
var Facility;
require.ensure([], function(require) { Facility = require('./Facility'); }, 'facility');
开发人员,我可以在源代码中看到facility.bundle.js,但对其的调用返回未定义的错误
警告:React.createElement:type不能为null,undefined,boolean或number。 它应该是一个字符串(对于DOM元素)或一个ReactClass(对于复合组件)。 检查
NonPatientSer
的渲染方法
和
未捕获的不变违反:元素类型无效:预期为字符串(对于内置组件)或类/函数(对于复合组件),但得到:未定义。 检查
NonPatientSer
的渲染方法。
生产 (运行构建)
不允许加载本地资源:file:/// C:/Users/.../facility.bundle.js
Webpack配置
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: __dirname + '/',
chunkFilename: '[name].bundle.js'
},
首先,您需要在webpack.config中修复publicPath属性。 您应该使用:
publicPath: '/dist/'
而是绝对路径。
第二,如果对导出模块使用es6语法:
export default Facility;
您应该这样编写导入代码:
require.ensure([], function(require) {
Facility = require('./Facility').default;
ReactDOM.render(<Facility/>, document.getElementById('app'));
}, 'facility');
或者只是使用commonjs语法:
module.exports = Facility;
接着
require.ensure([], function(require) {
Facility = require('./Facility');
ReactDOM.render(<Facility/>, document.getElementById('app'));
}, 'facility');
另请参阅: http : //www.2ality.com/2015/12/babel-commonjs.html
更新:您可以在条目js文件中设置publicPath。 例如:
entry.js
__webpack_public_path__ = '/publicPathToChunk/';
var chunk;
require.ensure([], function(require) {
chunk = require('./chunk');
}, 'chunk');
另外,您可以使用下一个技巧:
var bundleSrc = document.querySelector('[src*="bundle"]').getAttribute("src");
__webpack_public_path__ = bundleSrc.substr(0, bundleSrc.lastIndexOf("/") + 1);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.