I use react to build my library of components. I need to have an index.js to import all components in one place.

Something like this:

MyComponents/
  Button.js
  Label.js
  index.js

Inside the index.js I tried to do next:

// this export nothing
export {default} from './Button';
// this tells me about syntax error
export default from './Button';

I found only this solution that works

import Button from './Button';
export default Button;

But I found that some React Component libraries uses syntax that I mentioned above (export default from './Button') - and it works somehow. Looks like they use some babel-plugin-transform-* to do this.

Please find me to find how to transform my two lines of import export to one line of export ... from .... Thank you.

P.S. In the end I need to do this: import Button from './MyComponents';

I use react to build my library of components. I need to have an index.js to import all components in one place.

Something like this:

MyComponents/
  Button.js
  Label.js
  index.js

Inside the index.js I tried to do next:

// this export nothing
export {default} from './Button';
// this tells me about syntax error
export default from './Button';

I found only this solution that works

import Button from './Button';
export default Button;

But I found that some React Component libraries uses syntax that I mentioned above (export default from './Button') - and it works somehow. Looks like they use some babel-plugin-transform-* to do this.

Please find me to find how to transform my two lines of import export to one line of export ... from .... Thank you.

P.S. In the end I need to do this: import Button from './MyComponents';

• javascript
• node.js
• reactjs
• npm
• babeljs

• Please try export {default as Button} from './Button'. – Przemysław Zalewski Commented Dec 7, 2016 at 23:10
• Sadly it doesn't work. It compiles, but don't allow to import a Button from the module. – Anton Danylchenko Commented Dec 8, 2016 at 18:43
• 1 I have replicated your example and export default from './Button' works for me. Compiles and displays correctly. I use following Babel presets: "es2015", "stage-0", "react". Can you show me your Babel/Webpack configuration? See a screenshot here – Przemysław Zalewski Commented Dec 8, 2016 at 19:18
• Hi. I don't use stage-0 or stage-1 because this is an experimental features. It may be a reason. – Anton Danylchenko Commented Dec 9, 2016 at 10:43
• 1 Oh yes. Finally I found a description of this proposal here: github.com/leebyron/ecmascript-export-default-from – Anton Danylchenko Commented Dec 9, 2016 at 10:47

3 Answers 3

Use the following syntax:

File: layouts/index.js

export {default as Flex} from './flex'
export {default as Grid} from './grid'
export {default as Dock} from './dock'

Then you can use

import { Dock, Grid } from 'layouts'

or

import layouts from 'layouts'

<layouts.Flex >...</layouts.Flex>

In order to export nested indices created by the above method you can use export * syntax:

File: icons/index.js

export * as action from './action';
export * as alert from './alert';
export * as av from './av';

Usage:

import * as icons from 'material/icons'

<icons.action.Close />

To use this construction:

export default from './Button';

we need to use preset-stage-1.

How to use

1. npm install babel-preset-stage-1 --save-dev
2. edit file package.json and add stage-1 to the presets section in babel.

Example of package.json

"babel": {
  "presets": [
    "es2015",
    "stage-1",
    "react"
  ]
},

More info

It's a proposal to the ECMAScript - https://github.com/leebyron/ecmascript-export-default-from (still in review).

Just use export * from "./Button"; to export the whole module. This will help your use case.

Unfortunately, there is no one-line syntax to export just the default of another module.