Webpack 2.0 with native ES6 modules: Missed TypeError: Unable to read property 'a' from undefined

Question

I just turned off the modules in babel with a preset ["es2015", { "modules": false }]in order to use tree shake, and now my application, which worked fine before, no longer loads. The console displays Uncaught TypeError: Cannot read property 'a' of undefinedand a white page is displayed.

Webpack 2.2.0-rc.1

Answer 1

If you use the babel plugin, for example, add-module-exports , you need to remove it, since webpack with the native ES6 Modules will not work with it.

If you are interested in why this happens, read on.

Findings:

For an exported component such as

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()}}
/******/    }