How to export default modules in index.js barrels

Question

I'm trying to export default modules using index.js barrels but can't seem to get it to work. It works fine with named exports but not default exports.

Simplified Project Structure

/hellos
  /components
    Hello.js
    Hellos.js
    index.js
  index.js
App.js

/hellos/component/Hellos.js

...
export default Hellos

/hellos/component/index.js

export * from './Hello';
export * from './Hellos';

/hellos/index.js

export * from './components'
export * from './actions'
export * from './constants'
export * from './reducers'

App.js

import Hellos from './hellos'
console.log(Hellos) // <- undefined

The Hellos module imported just above is always undefined.

I can get it to work using either named exports or a direct import in App.js i.e. import Hellos from './hellos/component/Hellos' but I consider this bad practice and only wish to use import Hellos from '/hellos'.

I suspect the problem is with the index.js barrels but I can't work it out. Please help.

Answer 1

Use the following line:

export { default as MyModule } from 'src/MyModule'

Hope it suits your needs, cheers

Answer 2

For completeness sake, it is also possible to import them first, then export them under the imported name:

import Something from "./somewhere/whatever";

export { Something };

Answer 3

For those using babel

Use babel-plugin-transform-export-extensions plugin like this in your .babelrc:

  "plugins": [
    "babel-plugin-transform-export-extensions",
    "transform-es2015-modules-commonjs"
  ]

And then install the plugin like this:

npm install --save-dev babel-plugin-transform-export-extensions
npm install --save-dev babel-plugin-transform-es2015-modules-commonjs

Then u can use export in index.js simply like this:

export simple from './simple';
export restClient from './jsonServer';
export * from './types';

For those using earlier babel versions, simply use the commonjs module.