What is the difference between with and without curly bracket notation in export/import statements?

Question

I'm new to ES6 and a bit confused with the way classes are exported and imported. It seems many different notations are valid but work differently.

I wrote a class like this in src/web-api.js:

class WebApi {
    // ...
}

export { WebApi };

Which I import with:

import { WebApi } from './src/web-api.js'

This works fine, but before I've tried the same thing without curly brackets and it didn't work:

export WebApi; // Tells me '{' expected

import WebApi from './src/web-api.js'; // No syntax error but WebApi is undefined

Even though on the MDN documentation for export, the notation export expression; appears to be valid.

Likewise, this is how React is imported in my application file:

import React, { Component } from 'react';

Why is one class with and another one without curly brackets? In general, how can I tell when to use and not to use curly brackets?

Answer 1

In your case, if you import from the src/web-api.js file without the curly braces, you should have anexport default something in the src/webfile-api.js

Without curly braces

class WebApi {...};
export default WebApi;

In your file

import WebApi from './src/web-api.js'

// Here, the element withexport default in the src/web-api.js file should be imported without the curly braces anywhere. PS: It must have only one export default for each file.

With curly braces

export { WebApi }

In your file import {WebApi} from './src/web-api.js'

Dan Abramov explains clearly the export/import methods in ES6 at this answer. When should I use curly braces for ES6 import?

Answer 2

ES6 offers many ways to manage modules through import/export. But there are basically two main strategies:

1. Default export/import with export default and import module from './module'
2. Multiple exports/imports with export and import {member} from './module' or import * as module from './module'

(Mixing both is possible but not recommended.)

---

Module to export/import

function foo() {
  console.log('Foo');
}

function bar() {
  console.log('Bar');
}

Strategy #1: Default export/import

Export (module.js)

function foo() {
  console.log('Foo');
}

function bar() {
  console.log('Bar');
}

export default {foo, bar};

/*
  {foo, bar} is just an ES6 object literal that could be written like so:

  export default {
    foo: foo,
    bar: bar
  };

  It is the legacy of the "Revealing Module pattern"...
*/

Import (main.js)

import module from './module';

module.foo(); // Foo
module.bar(); // Bar

Strategy #2: Multiple exports/imports

Export (module.js)

export function foo() {
  console.log('Foo');
}

export function bar() {
  console.log('Bar');
}

Import (main.js)

import {foo, bar} from './module';

foo(); // Foo
bar(); // Bar

/*
  This is valid too:

  import * as module from './module';

  module.foo(); // Foo
  module.bar(); // Bar
*/

---

As I said previously, ES6 modules are much more complex than that. For further information, I recommend you to read Exploring ES6 by Dr. Axel Rauschmayer, especially this chapter: http://exploringjs.com/es6/ch_modules.html.