When should I use curly braces for ES6 import?

Question

It seems to be obvious, but I found myself a bit confused about when to use curly braces for importing a single module in ES6. For example, in the React-Native project I am working on, I have the following file and its content:

File initialState.js

var initialState = {
    todo: {
        todos: [
            {id: 1, task: 'Finish Coding', completed: false},
            {id: 2, task: 'Do Laundry', completed: false},
            {id: 2, task: 'Shopping Groceries', completed: false},
        ]
    }
};

export default initialState;

In the TodoReducer.js, I have to import it without curly braces:

import initialState from './todoInitialState';

If I enclose the initialState in curly braces, I get the following error for the following line of code:

Cannot read property todo of undefined

File TodoReducer.js:

export default function todos(state = initialState.todo, action) {
    // ...
}

Similar errors also happen to my components with the curly braces. I was wondering when I should use curly braces for a single import, because obviously, when importing multiple component/modules, you have to enclose them in curly braces, which I know.

The Stack Overflow post at here does not answer my question, instead I am asking when I should or should not use curly braces for importing a single module, or I should never use curly braces for importing a single module in ES6 (this is apparently not the case, as I have seen single import with curly braces required).

Ariellearies

How to find out if export is default or named ? e.g. reac-router-dom package's Link ? Let's say I've installed a package and want to import, how will I get to know if to use {} or not – Squatter

Look at the export statement(s) in the source code, or import * as whatIsIt from 'the-module' and then console.log(whatIsIt) to examine the object that's imported. It may have a default property, and/or other named properties. – Lepper

Answer 1

This is a default import:

// B.js
import A from './A'

It only works if A has the default export:

// A.js
export default 42

In this case it doesn’t matter what name you assign to it when importing:

// B.js
import A from './A'
import MyA from './A'
import Something from './A'

Because it will always resolve to whatever is the default export of A.

---

This is a named import called A:

import { A } from './A'

It only works if A contains a named export called A:

export const A = 42

In this case the name matters because you’re importing a specific thing by its export name:

// B.js
import { A } from './A'
import { myA } from './A' // Doesn't work!
import { Something } from './A' // Doesn't work!

To make these work, you would add a corresponding named export to A:

// A.js
export const A = 42
export const myA = 43
export const Something = 44

---

A module can only have one default export, but as many named exports as you'd like (zero, one, two, or many). You can import them all together:

// B.js
import A, { myA, Something } from './A'

Here, we import the default export as A, and named exports called myA and Something, respectively.

// A.js
export default 42
export const myA = 43
export const Something = 44

We can also assign them all different names when importing:

// B.js
import X, { myA as myX, Something as XSomething } from './A'

---

The default exports tend to be used for whatever you normally expect to get from the module. The named exports tend to be used for utilities that might be handy, but aren’t always necessary. However it is up to you to choose how to export things: for example, a module might have no default export at all.

This is a great guide to ES modules, explaining the difference between default and named exports.

Adim

Is there any downfall to having a module have individual exports export const myA = 43; export const Something = 44; as well as a export default { myA, Something } ? So when you import you can either import A from './A'; for everything in the module, or import { Something } from './A'; so you only get a some of the module – Facelift

It is fine, but there is already a syntax for grabbing all named exports into a single object: import * as AllTheThings. – Adim

what about this- import 'firebase/storage'; or import 'rxjs/add/operator/map';. What is that actually doing? – Jodijodie

@kyw: This executes the module but ignores the exported value. Useful for side effects. – Adim

Note: You can't do import { A }; when you did const A = 42; export default A; This might seem weird, and may break your imports when refactoring from named to default exports (unless you remove the curly braces). I guess it's kinda logical though (sigh..), in the sense that default exports only export a value, not a name. The export default A only refers to the value 42 referenced by A. – Drawback

IMHO, in the case of import { A }; it ought to have assigned it from the default export in case no named export was found.. – Drawback

great answer, except a module can have zero or one default exports (though your examples imply this). – Tlaxcala

@DanAbramov When I use the code you provided, I have this issue : "export 'default' (imported as 'myA') was not found in './mymodule' – Zinfandel

@DanAbramov Thanks for the great details. I am totally new to this tricky things. Recently I did import x from "xpkg"; didn't work, instead import { x } from "xpkg"; worked. As a consumer, would you recommend we look inside of the package, if so typically what file(s) to look into? – Maharajah

Why are SO answers almost always soo much better explained than any "tutorial" out there? Thank you soo much for spelling this out and covering most cases, it's so much easier and quicker to comprehend these concepts for n00bs 😇 – Berkeley

Answer 2

I would say there is also a starred notation for the import ES6 keyword worth mentioning.

If you try to console log Mix:

import * as Mix from "./A";
console.log(Mix);

You will get:

When should I use curly braces for ES6 import?

The brackets are golden when you need only specific components from the module, which makes smaller footprints for bundlers like webpack.

Nebulosity

Are import * as Mix from "./A"; and import A as Mix from "./A"; the same? – Heilman

What do you mean by "starred notation"? Wild cards? – Fervency

@PeterMortensen term star, or starred I believe I used "*" thefreedictionary.com/starred an asterisk. It was 3 years ago, but I think it's that. – Nebulosity

@PeterMortensen starred means use start symbol and does import all from that file/module – Sixpack

@Alireza I tried importing const Imex = <div>Hello</div> console.log(a); as import Imex from "./Import"; and in the return statement <Imex /> showed error and {Imex} runs perfectly ? – Spearing

@ShubhamSinghvi Imex is not a component. – Merth

Nice diagram. Easy to understand Thanks. – Truditrudie

Answer 3

Dan Abramov's answer explains about the default exports and named exports.

Which to use?

Quoting David Herman:

ECMAScript 6 favors the single/default export style, and gives the sweetest syntax to importing the default. Importing named exports can and even should be slightly less concise.

However, in TypeScript named export is favored because of refactoring. Example, if you default export a class and rename it, the class name will change only in that file and not in the other references, with named exports class name will be renamed in all the references. Named exports is also preferred for utilities.

Overall use whatever you prefer.

Additional

Default export is actually a named export with name default, so default export can be imported as:

import {default as Sample} from '../Sample.js';

Guaco

The Additional line is good information. import A from './A' doesn't make sense if you're exporting without defining a name like export default 42. – Spidery

Please make sure not to misinterpret David Herman's quote. It does not mean "It is favoured to always use single/default exports in ES6", but rather "Because single exports are so common, ES6 supports defaults best and we gave them the sweetest syntax". – Jonna

Answer 4

If you think of import as just syntax sugar for Node.js modules, objects, and destructuring, I find it's pretty intuitive.

// bar.js
module = {};

module.exports = {
  functionA: () => {},
  functionB: ()=> {}
};

 // Really all that is is this:
 var module = {
   exports: {
      functionA, functionB
   }
  };

// Then, over in foo.js

// The whole exported object:
var fump = require('./bar.js'); //= { functionA, functionB }
// Or
import fump from './bar' // The same thing - object functionA and functionB properties


// Just one property of the object
var fump = require('./bar.js').functionA;

// Same as this, right?
var fump = { functionA, functionB }.functionA;

// And if we use ES6 destructuring:
var { functionA } =  { functionA, functionB };
// We get same result

// So, in import syntax:
import { functionA } from './bar';

Mandy

Answer 5

Summary ES6 modules:

Exports:

You have two types of exports:

1. Named exports
2. Default exports, a maximum one per module

Syntax:

// Module A
export const importantData_1 = 1;
export const importantData_2 = 2;
export default function foo () {}

---

Imports:

The type of export (i.e., named or default exports) affects how to import something:

1. For a named export we have to use curly braces and the exact name as the declaration (i.e. variable, function, or class) which was exported.
2. For a default export we can choose the name.

Syntax:

// Module B, imports from module A which is located in the same directory

import { importantData_1 , importantData_2  } from './A';  // For our named imports

// Syntax single named import:
// import { importantData_1 }

// For our default export (foo), the name choice is arbitrary
import ourFunction from './A';

Things of interest:

1. Use a comma-separated list within curly braces with the matching name of the export for named export.
2. Use a name of your choosing without curly braces for a default export.

Aliases:

Whenever you want to rename a named import this is possible via aliases. The syntax for this is the following:

import { importantData_1 as myData } from './A';

Now we have imported importantData_1, but the identifier is myData instead of importantData_1.

Redoubt

Answer 6

In order to understand the use of curly braces in import statements, first, you have to understand the concept of destructuring introduced in ES6

1. Object destructuring

   var bodyBuilder = {
     firstname: 'Kai',
     lastname: 'Greene',
     nickname: 'The Predator'
   };
   
   var {firstname, lastname} = bodyBuilder;
   console.log(firstname, lastname); // Kai Greene
   
   firstname = 'Morgan';
   lastname = 'Aste';
   
   console.log(firstname, lastname); // Morgan Aste
   

2. Array destructuring

   var [firstGame] = ['Gran Turismo', 'Burnout', 'GTA'];
   
   console.log(firstGame); // Gran Turismo
   

   Using list matching

     var [,secondGame] = ['Gran Turismo', 'Burnout', 'GTA'];
     console.log(secondGame); // Burnout
   

   Using the spread operator

   var [firstGame, ...rest] = ['Gran Turismo', 'Burnout', 'GTA'];
   console.log(firstGame);// Gran Turismo
   console.log(rest);// ['Burnout', 'GTA'];
   

Now that we've got that out of our way, in ES6 you can export multiple modules. You can then make use of object destructuring like below.

Let's assume you have a module called module.js

    export const printFirstname(firstname) => console.log(firstname);
    export const printLastname(lastname) => console.log(lastname);

You would like to import the exported functions into index.js;

    import {printFirstname, printLastname} from './module.js'

    printFirstname('Taylor');
    printLastname('Swift');

You can also use different variable names like so

    import {printFirstname as pFname, printLastname as pLname} from './module.js'

    pFname('Taylor');
    pLanme('Swift');

Batiste

Since you are showing comparisons to destructuring, I would add the equivalent destructuring comparison to your last comment: import {printFirstname as pFname, printLastname as pLname} from './module.js' is equivalent to: var foo = {printFirstname: 'p_f_n', printLastname: 'p_l_n'}; var { printFirstname:pFname, printLastname: pLname } = foo; pFname('Taylor'); pLname('Swift'); – Frausto

@TusharPandey I am a body builder – Batiste

I think in any explanation of importing and when to use curlys vs not using them , if you are not mentioning object destructing, you really are not giving the best explanation. Once I learned about destructuring I never thought about why iuse the curly anymore, it just intuitively made sense. – Electra

curly braces in import statement has got nothing to do with destructuring. Destructuring is not meant for functions. yet we use curly braces in import statements which import a function (if not default export). – Inoue

Answer 7

Usually when you export a function you need to use the {}.

If you have

export const x

you use

import {x} from ''

If you use

export default const x

you need to use

import x from ''

Here you can change X to whatever variable you want.

Thermoluminescence

Answer 8

The curly braces ({}) are used to import named bindings and the concept behind it is destructuring assignment

A simple demonstration of how import statement works with an example can be found in my own answer to a similar question at When do we use '{ }' in javascript imports?.

Vested

Answer 9

In ES6 and later versions of JavaScript, curly braces are used in import statements to selectively import named exports from modules. You should use curly braces when you want to import specific variables, functions, or classes that have been exported from another module

1st Case:

// moduleA.js
export const a = 1;
export const b = 2;

// Using curly braces to import specific named exports
import { a, b } from './moduleA';

2nd Case:

// moduleB.js
export default 42;

// Importing the default export without curly braces
import myNumber from './moduleB';

3rd Case:

// moduleC.js
export const x = 10;
export default 20;

// Importing both named and default exports in a single line
import myDefault, { x } from './moduleC';

Standoffish

Answer 10

• If there is any default export in the file, there isn't any need to use the curly braces in the import statement.

• if there are more than one export in the file then we need to use curly braces in the import file so that which are necessary we can import.

• You can find the complete difference when to use curly braces and default statement in the below YouTube video.

  21. ES6 Modules. Different ways of using import/export, Default syntax in the code. ES6 | ES2015

Listerism

Answer 11

The curly braces are used only for import when export is named. If the export is default then curly braces are not used for import.

Glower

Answer 12

For a default export we do not use { } when we import.

For example,

File player.js

export default vx;

File index.js

import vx from './player';

File index.js

File player.js

If we want to import everything that we export then we use *:

Salahi