"export default from" doesn't work with Babel React

Question

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

Sadly it doesn't work. It compiles, but don't allow to import a Button from the module. — Anton Danylchenko
– Anton Danylchenko, Commented Dec 8, 2016 at 18:43
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
– 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
– Anton Danylchenko, Commented Dec 9, 2016 at 10:43
Oh yes. Finally I found a description of this proposal here: github.com/leebyron/ecmascript-export-default-from — Anton Danylchenko
– Anton Danylchenko, Commented Dec 9, 2016 at 10:47

Przemysław Zalewski · Accepted Answer · 2016-12-07 23:24:21Z

11

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 />

edited Dec 7, 2016 at 23:24

answered Dec 7, 2016 at 23:09

Przemysław Zalewski

4,0261 gold badge25 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Anton Danylchenko Over a year ago

Sorry, but I need to use import Button from './MyComponents'; instead of import {Button} from './MyComponents';

Anton Danylchenko Over a year ago

And with asterisk it also doesn't work - SyntaxError: export * as Button from './Button';

Przemysław Zalewski Over a year ago

You can always import Button from './MyComponents/Button' if you want to only import the Button, which is more semantically correct.

Przemysław Zalewski Over a year ago

You are right, export * doesn't work in this case. It only works for nested indices exported by the above syntax. I'm going to edit the answer.

Anton Danylchenko Over a year ago

My project structure has a bigger hierarchy. It's my very simplified example to understand how can I correctly use imports in the index.js file to use per-component directory.

|

Anton Danylchenko · Accepted Answer · 2016-12-09 11:03:39Z

4

To use this construction:

export default from './Button';

we need to use preset-stage-1.

How to use

npm install babel-preset-stage-1 --save-dev
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).

answered Dec 9, 2016 at 11:03

Anton Danylchenko

2,3671 gold badge26 silver badges25 bronze badges

Comments

Lauren Van Sloun · Accepted Answer · 2019-01-23 14:44:50Z

0

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.

edited Jan 23, 2019 at 14:44

Lauren Van Sloun

1,2635 gold badges20 silver badges30 bronze badges

answered Dec 7, 2016 at 22:43

Sagi_Avinash_Varma

1,50912 silver badges23 bronze badges

11 Comments

Anton Danylchenko Over a year ago

In the Button.js I use this export: export default Button; and as you can see from my description - I can import it and export. But question is how to do this in only one string.

Anton Danylchenko Over a year ago

See this for example: github.com/callemall/material-ui/blob/master/src/AppBar/…

Sagi_Avinash_Varma Over a year ago

try export * from "./Button"; this will export everything along with default. there is no solution to just export deafult in one line. hope this helps. I updated my answer

Anton Danylchenko Over a year ago

Looks like you totally not understand my question. And import Button from './Button'; is mentioned in my original question, if you will read it carefully.

Sagi_Avinash_Varma Over a year ago

i understood ur question there is no available solution to export just the default import of another module in "one line". but u can do export * from "./Button"; this will work perfectly

|

Collectives™ on Stack Overflow

"export default from" doesn't work with Babel React

3 Answers 3

7 Comments

How to use

Example of `package.json`

More info

Comments

11 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

How to use

Example of package.json

More info

Comments

11 Comments

Your Answer

Sign up or log in

Post as a guest

Related

Example of `package.json`