如何修复require.确保错误Webpack，Babel6，React

How to fix require.ensure error Webpack, Babel6, React?

本文关键字：Babel6 React Webpack 错误 何修复 require 确保      更新时间：2023-11-27

我试图使用require.esure为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、未定义、，布尔值或数字。它应该是字符串（对于DOM元素）或ReactClass（用于复合组件）。检查的渲染方法NonPatientSer

和

未捕获的不变量冲突：元素类型无效：应为字符串（用于内置组件）或类/函数（用于复合组件），但得到：未定义。检查的渲染方法CCD_ 2。

生产（运行-构建）

不允许加载本地资源：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);
相关文章：