具有本机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

如果你使用像“ add-module-exports ”这样的 babel 插件，你需要删除它，因为带有原生 ES6 模块的 webpack 在启用它的情况下将无法工作

\n\n

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

\n\n

发现：

\n\n

给定一个像这样的导出组件

\n\n

class TradeComponent extends React.Component {\n// ...\n}\n\nexport default TradeComponent;\n

\n\n

是这样导入的

\n\n

import TradeComponent from \'components/Trade\';\n

\n\n

导出的组件编译成这样

\n\n

/***/ "./components/Trade/index.js":\n/* exports provided: default */\n/* exports used: default */\n/*!***********************************!*\\\n  !*** ./components/Trade/index.js ***!\n  \\***********************************/\n/***/ function(module, exports, __webpack_require__) {\n\n// ... Imports and component\n\nvar _default = TradeComponent; // _default = TradeComponent()\n/* harmony default export */ exports["a"] = _default; // exports = Object {}\nmodule.exports = exports[\'default\']; // module = Object {i: "./components/Trade/index.js", l: false, exports: undefined, hot: Object, parents: Array[1]\xe2\x80\xa6}\n// ^ Notice the module.exports = undefined above\n;\n\nvar temp2 = // ... React hot loader things and end of component\n

\n\n

结果是__webpack_require__这样的

\n\n

// The require function\n/******/    function __webpack_require__(moduleId) {\n\n/******/        // Check if module is in cache\n/******/        if(installedModules[moduleId])\n/******/            return installedModules[moduleId].exports;\n\n/******/        // Create a new module (and put it into the cache)\n/******/        var module = installedModules[moduleId] = {\n/******/            i: moduleId,\n/******/            l: false,\n/******/            exports: {},\n/******/            hot: hotCreateModule(moduleId),\n/******/            parents: (hotCurrentParentsTemp = hotCurrentParents, hotCurrentParents = [], hotCurrentParentsTemp),\n/******/            children: []\n/******/        };\n\n/******/        // Execute the module function\n/******/        modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));\n\n/******/        // Flag the module as loaded\n/******/        module.l = true; // module = Object {i: "./components/Trade/index.js", l: true, exports: undefined, hot: Object, parents: Array[1]\xe2\x80\xa6}\n\n/******/        // Return the exports of the module\n/******/        return module.exports; // undefined\n/******/    }\n

\n\n

这使得组件像这样损坏

\n\n

/***/ "./components/Trade/QuickTrade/BuyForm.js":\n/* exports provided: default */\n/* exports used: default */\n/*!************************************************!*\\\n  !*** ./components/Trade/QuickTrade/BuyForm.js ***!\n  \\************************************************/\n/***/ function(module, exports, __webpack_require__) {\n\n"use strict";\n// ... More imports\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_9_components_Suggest__ = __webpack_require__(/*! components/Suggest */ "./components/Suggest/Suggest.js");\n// __WEBPACK_IMPORTED_MODULE_9_components_Suggest__ = Object {}\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_10_components_Trade__ = __webpack_require__(/*! components/Trade */ "./components/Trade/index.js");\n// __WEBPACK_IMPORTED_MODULE_10_components_Trade__ = undefined\n\n// ... The rest of the component\n\n}(__WEBPACK_IMPORTED_MODULE_10_components_Trade__["a" /* default */]); \n// ^ This is where it breaks because components_Trade__ is undefined\n

\n\n

如果我们添加命名导出，即使不更改导入，问题也能解决

\n\n

export class TradeComponent extends React.Component {\n// ...\n}\n\nexport default TradeComponent;\n

\n\n

因为现在看起来像这样

\n\n

/***/ "./components/Trade/index.js":\n/* exports provided: default */\n/* exports used: default */\n/*!***********************************!*\\\n  !*** ./components/Trade/index.js ***!\n  \\***********************************/\n/***/ function(module, exports, __webpack_require__) {\n\n// ... Imports and component\n\nvar _default = TradeComponent; // _default = TradeComponent()\n/* harmony default export */ exports["a"] = _default; // exports = Object {}\n// Notice the missing module.exports = exports["default"]; // undefined\n;\n\nvar temp2 = // ... React hot loader things and end of component\n

\n\n

结果是__webpack_require__这样的

\n\n

// The require function\n/******/    function __webpack_require__(moduleId) {\n\n/******/        // Check if module is in cache\n/******/        if(installedModules[moduleId])\n/******/            return installedModules[moduleId].exports;\n\n/******/        // Create a new module (and put it into the cache)\n/******/        var module = installedModules[moduleId] = {\n/******/            i: moduleId,\n/******/            l: false,\n/******/            exports: {},\n/******/            hot: hotCreateModule(moduleId),\n/******/            parents: (hotCurrentParentsTemp = hotCurrentParents, hotCurrentParents = [], hotCurrentParentsTemp),\n/******/            children: []\n/******/        };\n\n/******/        // Execute the module function\n/******/        modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));\n\n/******/        // Flag the module as loaded\n/******/        module.l = true; // module = Object {i: "./components/Trade/index.js", l: true, exports: Object, hot: Object, parents: Array[1]\xe2\x80\xa6}\n\n/******/        // Return the exports of the module\n/******/        return module.exports; // module = Object {exports: Object{a:TradeComponent()}}\n/******/    }\n

\n