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.

Answer 1

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