What are differences between { default as name } and { name as default } when exporting js modules?

Question

I was taking a look to the swiper.esm.js from Swiper.js (source copied here for reference), and the first line is

export { default as Swiper, default } from './core/core.js';

while the following are of the form:

export { default as Virtual } from './modules/virtual/virtual.js';

and in MDN docs i can find that also something like

export { Something as default }

is possible. So I can currently see the following syntaxes:

export { Something as default }
export { default as Something }
export { default as Something, default }

What are the difference between the 3?

It should become pretty clear when you try to import from modules with those exports. — jonrsharpe
– jonrsharpe, Commented Feb 8, 2022 at 14:05

AKX · Accepted Answer · 2022-02-08 14:06:40Z

4

// Import name `Something` from `...`, 
//   re-export as this module's default export
export { Something as default } from '...';

// Import default export from `...`, 
//   re-export as `Something` from this module
export { default as Something } from '...';

// Import default export from `...`, 
//   re-export it as `Something` from this module 
//   and this module's default export
export { default as Something, default } from '...';

answered Feb 8, 2022 at 14:06

AKX

171k16 gold badges148 silver badges230 bronze badges

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

6 Comments

T.J. Crowder Over a year ago

Really nicely put! I might just add something saying they're all examples of export renaming.

Luca Reghellin Over a year ago

thank you. The last 'and this module's default export' is for sure correct but quite strange to me considering the source code where it's written: jsfiddle.net/fw4zj8qk that is the swiper.esm.js source code. So what would the default be here, that is exported in the last line of your answer?

AKX Over a year ago

@LucaReghellin It means that as an user of Swiper, doing import Swiper from 'swiper'; and import {Swiper} from 'swiper'; would be equivalent. This would be convenient if you wanted to import multiple things from the package without one looking special: import {Swiper, Zoom, Grid} from 'swiper'; works, so does import Swiper, {Zoom, Grid} from 'swiper';.

T.J. Crowder Over a year ago

@LucaReghellin - export { default as Swiper, default } from './core/core.js'; re-exports the default export of "./core/core.js" as Swiper and also as default.

T.J. Crowder Over a year ago

@AKX - Although you could just do import Swiper, {Zoom, Grid} from 'swiper';. So not really all that much more convenient, though more robust if you had a typo like Swper. (One of many reasons to use named exports, not defaults, but of course when importing you're stuck with what the source package did.)

|

Collectives™ on Stack Overflow

What are differences between { default as name } and { name as default } when exporting js modules?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related