Question

41

How to import both default and named from an ES6 module

rated 0 times [ 46] [ 5] / answers: 1 / hits: 16210 / 5 Years ago, fri, august 30, 2019, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

marques

Add To Favorites

Follow

Total Points: 366

Total Questions: 108

Total Answers: 111

Location: Burundi

Member since Wed, Nov 25, 2020

4 Years ago

answered 5 Years ago kaitlynnb · Accepted Answer

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