具有本机ES6模块的Webpack 2.0：未捕获的TypeError：无法读取未定义的属性“a”

Question

我刚刚使用["es2015", { "modules": false }]预设来关闭babel中的模块以利用树木抖动，现在我的应用程序（之前完美运行）不再加载。控制台显示Uncaught TypeError: Cannot read property 'a' of undefined，并显示白页。

Webpack 2.2.0-rc.1

Answer 1

如果您使用像＆＃34; add-module-exports＆＃34;这样的babel插件，则需要将其删除，因为使用原生ES6模块的webpack无法启用

如果您对发生这种情况感兴趣，请继续阅读。

调查结果：

给出像这样的导出组件

class TradeComponent extends React.Component {
// ...
}

export default TradeComponent;

哪个是这样导入的

import TradeComponent from 'components/Trade';

导出的组件将编译为此

/***/ "./components/Trade/index.js":
/* exports provided: default */
/* exports used: default */
/*!***********************************!*\
  !*** ./components/Trade/index.js ***!
  \***********************************/
/***/ function(module, exports, __webpack_require__) {

// ... Imports and component

var _default = TradeComponent; // _default = TradeComponent()
/* harmony default export */ exports["a"] = _default; // exports = Object {}
module.exports = exports['default']; // module = Object {i: "./components/Trade/index.js", l: false, exports: undefined, hot: Object, parents: Array[1]…}
// ^ Notice the module.exports = undefined above
;

var temp2 = // ... React hot loader things and end of component

这导致__webpack_require__像这样

// The require function
/******/    function __webpack_require__(moduleId) {

/******/        // Check if module is in cache
/******/        if(installedModules[moduleId])
/******/            return installedModules[moduleId].exports;

/******/        // Create a new module (and put it into the cache)
/******/        var module = installedModules[moduleId] = {
/******/            i: moduleId,
/******/            l: false,
/******/            exports: {},
/******/            hot: hotCreateModule(moduleId),
/******/            parents: (hotCurrentParentsTemp = hotCurrentParents, hotCurrentParents = [], hotCurrentParentsTemp),
/******/            children: []
/******/        };

/******/        // Execute the module function
/******/        modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));

/******/        // Flag the module as loaded
/******/        module.l = true; // module = Object {i: "./components/Trade/index.js", l: true, exports: undefined, hot: Object, parents: Array[1]…}

/******/        // Return the exports of the module
/******/        return module.exports; // undefined
/******/    }

这使得组件像这样打破

/***/ "./components/Trade/QuickTrade/BuyForm.js":
/* exports provided: default */
/* exports used: default */
/*!************************************************!*\
  !*** ./components/Trade/QuickTrade/BuyForm.js ***!
  \************************************************/
/***/ function(module, exports, __webpack_require__) {

"use strict";
// ... More imports
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_9_components_Suggest__ = __webpack_require__(/*! components/Suggest */ "./components/Suggest/Suggest.js");
// __WEBPACK_IMPORTED_MODULE_9_components_Suggest__ = Object {}
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_10_components_Trade__ = __webpack_require__(/*! components/Trade */ "./components/Trade/index.js");
// __WEBPACK_IMPORTED_MODULE_10_components_Trade__ = undefined

// ... The rest of the component

}(__WEBPACK_IMPORTED_MODULE_10_components_Trade__["a" /* default */]); 
// ^ This is where it breaks because components_Trade__ is undefined

如果我们添加命名导出，即使不更改导入

，问题也会得到解决

export class TradeComponent extends React.Component {
// ...
}

export default TradeComponent;

因为它现在看起来像这样

/***/ "./components/Trade/index.js":
/* exports provided: default */
/* exports used: default */
/*!***********************************!*\
  !*** ./components/Trade/index.js ***!
  \***********************************/
/***/ function(module, exports, __webpack_require__) {

// ... Imports and component

var _default = TradeComponent; // _default = TradeComponent()
/* harmony default export */ exports["a"] = _default; // exports = Object {}
// Notice the missing module.exports = exports["default"]; // undefined
;

var temp2 = // ... React hot loader things and end of component

这导致__webpack_require__像这样

// The require function
/******/    function __webpack_require__(moduleId) {

/******/        // Check if module is in cache
/******/        if(installedModules[moduleId])
/******/            return installedModules[moduleId].exports;

/******/        // Create a new module (and put it into the cache)
/******/        var module = installedModules[moduleId] = {
/******/            i: moduleId,
/******/            l: false,
/******/            exports: {},
/******/            hot: hotCreateModule(moduleId),
/******/            parents: (hotCurrentParentsTemp = hotCurrentParents, hotCurrentParents = [], hotCurrentParentsTemp),
/******/            children: []
/******/        };

/******/        // Execute the module function
/******/        modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));

/******/        // Flag the module as loaded
/******/        module.l = true; // module = Object {i: "./components/Trade/index.js", l: true, exports: Object, hot: Object, parents: Array[1]…}

/******/        // Return the exports of the module
/******/        return module.exports; // module = Object {exports: Object{a:TradeComponent()}}
/******/    }