Question

我尝试使用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但是对它的调用返回 undefined 并且这个错误

警告：React.createElement：type不应为null，未定义，布尔值或数字。它应该是一个字符串（对于DOM元素）或a ReactClass（用于复合组件）。检查渲染方法 NonPatientSer

和

未捕获的不变违规：元素类型无效：预期a string（用于内置组件）或类/函数（用于复合组件）但得到：未定义。检查渲染方法 NonPatientSer。

生产（运行构建）

不允许加载本地资源：文件：/// C：/Users/.../facility.bundle.js

Webpack配置

output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath:  __dirname + '/',
    chunkFilename: '[name].bundle.js'
  },

Answer 1

首先，您需要在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);

如何修复require.ensure错误Webpack，Babel6，React？

1 个答案: