How to import both default and named from an ES6 module

Question

What is the correct syntax to import both default and named resource from an ES6 JavaScript module?

Example:

export const defaultBrowser = 'Chrome';

export default [
  { value: 0, label: defaultBrowser },
  { value: 1, label: 'Firefox' },
  { value: 2, label: 'Safari' },
  { value: 3, label: 'Edge' },
];

How would one import that in one go?

It is not a duplicate of When should I use curly braces for ES6 import?, it is more specific, asking for a single import use-case, and not an import essay.

score 62 · Accepted Answer · edited Jul 18 '20 at 01:34

62

The correct syntax to import both default and named exports from ES6 module is to pass the default name (whatever one wants), and named, not-default modules separated by a comma:

Example: index.js

import browsers, { otherValue } from './browsers';

in an exemplary file tree:

.
└── src
    ├── browsers.js
    └── index.js

Often encountered real life example:

import React, { useState, useEffect } from 'react';

edited Jul 18 '20 at 01:34

qwertzguy

12,947
7
60
63

answered Aug 30 '19 at 08:14

wscourge

9,289
12
51
72

1

Please don't call it destructuring. – Bergi Aug 30 '19 at 08:30
OK - what's the correct naming for this? – wscourge Aug 30 '19 at 08:31
5

It's just a named import. (Which you can alias with `as`, not with `:` as in object destructuring, and you cannot destructure to nested targets either) – Bergi Aug 30 '19 at 13:05
OK, thanks for pointing it out, edited. – wscourge Aug 30 '19 at 13:06
9

`import defaultVar, { namedVar1, namedVar2 } from './your-file';` (for anybody who gets confused by the variable naming in the answer) – totymedli Jan 17 '20 at 23:59
1

*"[exemplary](https://en.wiktionary.org/wiki/exemplary#Adjective) file tree"* or *"example file tree"* (there is a difference)? – Peter Mortensen Dec 08 '20 at 10:19
what if both `default` and `{ foo }` are from the same file? – VimNing Jan 19 '22 at 10:14

How to import both default and named from an ES6 module

1 Answers1

Linked