Export more than one variable in ES6?

Question

I'm trying to export more than one variable in ES6:

exports.js

var TestObject = Parse.Object.extend('TestObject')
var Post = Parse.Object.extend('Post')

export default TestObject
export Post

main.js:

import TestObject from '../store'
import Post from '../store'

var testObject = new TestObject() // use Post in the same way
testObject.save(json).then(object => {
  console.log('yay! it worked', object)
})

I understand that there's only one default value so I only used default in the first item.

However, I get this error message:

Module build failed: SyntaxError: /home/alex/node/my-project/src/store/index.js: Unexpected token (9:7)
   7 | 
   8 | export default TestObject
>  9 | export Post

Maybe I'm doing it the wrong way?

Just a wild guess but have you tried adding a semicolon at the end of the first `export` line? — Pointy, Jan 07 '16 at 01:09

loganfsmyth · Accepted Answer · 2021-05-17T17:26:07.303

79

That is not valid syntax. You can do

export { Post }

or even just

export var Post = Parse.Object.extend('Post')

or shorten the whole file to

export default Parse.Object.extend('TestObject')
export var Post = Parse.Object.extend('Post')

Your imports are also incorrect, you'll want to do

import TestObject, { Post } from '../store'

This is if you really want a single default export and a separate named export. You can also just make two named exports and have no default if you want, e.g.

export var TestObject = Parse.Object.extend('TestObject');
export var Post = Parse.Object.extend('Post');

or

var TestObject = Parse.Object.extend('TestObject');
var Post = Parse.Object.extend('Post');
export { TestObject, Post };

and import with

import { TestObject, Post } from '../store'

edited May 17 '21 at 17:26

answered Jan 07 '16 at 01:11

loganfsmyth

156,129
30
331
251

I'm curious, what difference `export default` and `export var` makes? – alexchenco Jan 07 '16 at 01:16
4

The default export is the one you get when you `import foo from './module'`, if you use `export var SomeThing` you need to import it by name, e.g. `import {SomeThing} from './module';` – loganfsmyth Jan 07 '16 at 01:18
The default becomes the item you import without de-structuring the imported object. – Mario Tacke Jan 07 '16 at 01:18
@MarioTacke It's not destructuring, calling it that just confuses things. It's just an list of names inside `{}`, it's not an object. – loganfsmyth Jan 07 '16 at 01:19
1

So the only difference is that the object that used `export default` doesn't have curly brackets and the object that used 'export var` needs curly brackets? Both are named something when being imported: `foo`, `SomeThing`. – alexchenco Jan 07 '16 at 01:20
@loganfsmyth, you are right, I was confusing things. Thanks for the correction. – Mario Tacke Jan 07 '16 at 01:23
5

@alexchenco Yup, the main difference is that `foo` can be named anything and will always get the default, but `TestObject` needs to match the name of the export. If you wanted to give it a different name in the module where you import it, you'd have to do `import {TestObject as SomeOtherName} from`. `import foo from` is short for `import {default as foo} from` – loganfsmyth Jan 07 '16 at 01:41
@loganfsmyth Oh, so that's the difference. Thanks! – alexchenco Jan 07 '16 at 01:42

Mario Tacke · Answer 2 · 2017-08-04T14:55:10.677

41

You can export multiple objects like this in ES6

var TestObject = Parse.Object.extend('TestObject')
var Post = Parse.Object.extend('Post')

export {
    TestObject,
    Post
}

Then, when importing you do it like this:

import { TestObject, Post } from './your-file';

You can read all about import and export here.

edited Aug 04 '17 at 14:55

answered Jan 07 '16 at 01:11

Mario Tacke

5,378
3
30
49

The edit that was just made invalidated my answer. It is valid to export without giving it a key name in ES6. – Mario Tacke Jan 07 '16 at 01:14
Oh, I see. So the `default` keyword is not required anymore? – alexchenco Jan 07 '16 at 01:14
1

@MarioTacke Yeah I got nothing, no idea why that edit was accepted. – loganfsmyth Jan 07 '16 at 01:14
Correct @alexchenco, you de-structure the imported file instead. – Mario Tacke Jan 07 '16 at 01:14

score 3 · Answer 3 · edited Oct 09 '22 at 09:32

In order to export multiple variables we have to take everything we want to export from a file inside { } like this -

export { <var 1>, <var 2> , <var 3>, ... , <var n>};

for default export we can separately write this-

export default <var name>;  // there can be only one default export;

In you code you can make the following changes -

exports.js

export { Post };

main.js

import { Post } from '<exports file>';

example

score 1 · Answer 4 · answered May 31 '20 at 18:47

1

export default export {}

the name by which you are exporting must be same while importing.

You can also use * while importing .

answered May 31 '20 at 18:47

Abhay

11
3

score -1 · Answer 5 · answered Jun 23 '17 at 21:11

If it fits your use case you can make the non-default export a property of your default export. I find it makes for cleaner code.

const TestObject = Parse.Object.extend('TestObject');
TestObject.Post = Parse.Object.extend('Post');

export default TestObject;

Then, when importing you only need to import the default:

import TestObject from './your-file.js';

Then, you use it like so:

TestObject.Post({some, args});

Export more than one variable in ES6?

5 Answers5

Linked