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.

I think you want something like `export { default as Hello } from './Hello';` in your component index file. — tengbretson, Dec 22 '16 at 19:26
To automate index.js creation you can use https://github.com/gajus/create-index — weivall, May 19 '17 at 15:40

score 47 · Accepted Answer · answered Jul 31 '17 at 22:35

47

Use the following line:

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

Hope it suits your needs, cheers

answered Jul 31 '17 at 22:35

Iban Dominguez Noda

858
9
16

1

If your tsconfig needs to set `"isolatedModules": true,` (it's mandatory in some react projects), you need to write `export { type default as MyModule } from 'src/MyModule'` instead. Looks a bit strange, but resolves everything clean. – Froxx Jan 18 '22 at 00:29

Shahbaz Shueb · Answer 2 · 2017-11-07T13:59:55.530

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.

score 0 · Answer 3 · answered Jun 26 '23 at 15:46

0

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 };

answered Jun 26 '23 at 15:46

Nils

520
7
15

How to export default modules in index.js barrels

3 Answers3