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.
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 example file tree:
.
└── src
├── browsers.js
└── index.js
Often encountered real life example:
import React, { useState, useEffect } from 'react';