Is `export Module from "module"` a valid JavaScript syntax?

Question

Problem

In React Native project in my company I came across such code, aggregating exports from multiple modules:

export Icon from "./Icon";
export Input from "./Input";
export Pills from "./Pills";

My editor highlights this as invalid syntax. I checked MDN docs on export and indeed they don't list such a syntax for aggregation. From what they list it seems the proper one would be:

export { default as Icon } from "./Icon";
export { default as Input } from "./Input";
export { default as Pills } from "./Pills";

But then the first code works in React Native project I'm in.

Question

Is this a valid syntax in JavaScript, or is it only available by some third party package we're using in the project?

@sagar That syntax would require the module to have named export Icon, while what the code in the post is exporting on are default exports, not named ones. — Robert Kusznier
– Robert Kusznier, Commented Aug 20, 2019 at 20:08
You can only export default exports using default keyword and named exports either using their name within curly braces or using * to export all the named exports in ES6. Otherwise, syntactically it would be wrong. — sagar
– sagar, Commented Aug 20, 2019 at 20:24

Federkun · Accepted Answer · 2019-08-20 20:33:20Z

3

You are right, but you are not really using ES6 module.

You are using babel, with the metro-react-native-babel-preset. Which make the above syntax valid.

As always, there's a proposal to make it part of the language, but it's currently on stage one.

From the proposal:

The proposed addition follows this same symmetric pattern:

Importing the "default" name (existing):

import v from "mod";

Exporting that name (existing):

import v from "mod"; export {v};

Symmetric "export from" (proposed):

export v from "mod";

edited Aug 20, 2019 at 20:33

answered Aug 20, 2019 at 20:28

Federkun

37.2k8 gold badges82 silver badges93 bronze badges

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

Comments

sagar · Accepted Answer · 2019-08-20 20:49:31Z

In the context of ES6 and Javascript. Syntactically react native method would be not valid. However As the @federkun suggested, it is valid under the context of babel and on the same desk proposal is already made. However, "default" is used to export default exports which can be exported again

export {default} from '.\example.js'

or you can use name export within curly braces to export only named export. Besides, to export all the named export you can use "*"

export * from '.\example.js'
export {test} from '.\example.js'

Or you can add babel dependency to use the same syntax.

Collectives™ on Stack Overflow

Is `export Module from "module"` a valid JavaScript syntax?

Problem

Question

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

Problem

Question

2 Answers 2

Comments

Comments

Related