Babel 6's Modified Default Export Behavior: A Shift from Convenience to Semantic Consistency

In a groundbreaking change, Babel 6 has revised its approach to exporting default values, introducing a shift from the previous CommonJS-inspired behavior to strict ES6 principles. This change has brought forth both opportunities and challenges for developers.

Previously, Babel appended the line "module.exports = exports['default']" to default export declarations, allowing developers to access them as "require('./foo')" directly. However, with Babel 6, this practice has been discontinued. Now, accessing default exports requires an explicit naming convention: "require('./foo').default".

Implications and Workarounds

This alteration has created the need for code modifications in projects that relied on the previous behavior. While adopting ES6 import/export syntax is desirable in many cases, some legacy code may require alternative solutions.

To preserve the old functionality without requiring manual fixes, one can employ the "babel-plugin-add-module-exports" plugin. This plugin re-inserts the "module.exports = exports['default']" line, emulating the pre-Babel 6 export mechanism.

Alternatively, developers who encounter the issue with named exports behaving differently in ES6 can explicitly export non-default exports to prevent module object overrides.

Example:

Input:

const foo = {}
export default foo

Output with Babel 5:

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
var foo = {};
exports["default"] = foo;
module.exports = exports["default"];

Output with Babel 6 (and es2015 plugin):

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
var foo = {};
exports["default"] = foo;

Conclusion

Babel 6's modified default export behavior ensures adherence to ES6 semantics, promoting consistency and avoiding confusion. While it requires some code adjustments, it ultimately contributes to the adoption of modern JavaScript standards and practices.