javascript - Named export vs exporting an object

Question

Why does this work:

const str = 'stuff';
export {
  str
};

But not this:

export default {
  str: 'stuff'
};

I'd like to import it as the following:

import { str } from 'myLib';

I'd like to assign the value directly in the export and not require having to create a variable before hand.

Also when I try:

export {
  str: 'stuff'
};

I get the error:

SyntaxError: /home/karlm/dev/project/ex.js: Unexpected token, expected , (41:5)
  39 | 
  40 | export {
> 41 |   str: 'stuff'
     |      ^
  42 | };
  43 | 

Answer 1

There are two styles of exports in ES6 -- named exports, and the default export. Named exports get exported with syntax like this:

export const str = 'stuff';
// or
const str = 'stuff';
export { str };

Default exports go like this:

const obj = { str: 'stuff' };
export default obj;
// or 
export default {
  str: 'stuff'
};

The difference shows up when you import. With the first, you need to include braces:

import { str } from 'myModule'; // 'stuff', from the first example

Without braces, it imports the default export:

import myModule from 'myModule'; //  {str: 'stuff'}, from the second example