Babel 6 changes how it exports default

Question

If you want CommonJS export behavior, you'll need to use CommonJS directly (or use the plugin in the other answer). This behavior was removed because it caused confusion and lead to invalid ES6 semantics, which some people had relied on e.g.

export default {
  a: 'foo'
};

and then

import {a} from './foo';

which is invalid ES6 but worked because of the CommonJS interoperability behavior you are describing. Unfortunately supporting both cases isn't possible, and allowing people to write invalid ES6 is a worse issue than making you do .default.

The other issue was that it was unexpected for users if they added a named export in the future, for example

export default 4;

then

require('./mod');
// 4

but

export default 4;
export var foo = 5;

then

require('./mod')
// {'default': 4, foo: 5}

You can also use this plugin to get the old export behavior back.

For library authors you may be able to work around this problem.

I usually have an entry point, index.js, which is the file I point to from the main field in package.json. It does nothing other than re-export the actual entry point of the lib:

export { default } from "./components/MyComponent";

To workaround the babel issue, I changed this to an import statement and then assign the default to module.exports:

import MyComponent from "./components/MyComponent";
module.exports = MyComponent;

All my other files stay as pure ES6 modules, with no workarounds. So only the entry point needs a change slightly :)

This will work for commonjs requires, and also for ES6 imports because babel doesn't seem to have dropped the reverse interop (commonjs -> es6). Babel injects the following function to patch up commonjs:

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 

I've spent hours battling this, so I hope this saves someone else the effort!

I have had such kind of issue. And this is my solution:

//src/arithmetic.js

export var operations = {
  add: function (a, b) {
      return a + b;
  },

  subtract: function (a, b) {
      return a - b;
  }
};

//src/main.js

import { operations }  from './arithmetic';

let result = operations.add(1, 1);

console.log(result);