ES6 how to do multiple default exports

Question

I am still getting a hang of react+redux, and ES6. I am trying to implement socketio, and I come across the problem of having to export socketio connect with my redux's connect.

redux connect

export default connect(mapStateToProps, matchDispatchToProps)(UserList);

socketio connect

export default socketConnect(App);

Question What is the correct syntax to make them work together?

There's only one default export because when a consumer of your module does an unnamed import, there's only one thing it can be assigned (the default export). I don't know exactly what you're trying to do with react+redux, but you should probably be using a named export for one of your exports. Here's a [quick import/export guide](https://hackernoon.com/import-export-default-require-commandjs-javascript-nodejs-es6-vs-cheatsheet-different-tutorial-example-5a321738b50f) and [ECMAScript 6 modules: the final syntax](http://2ality.com/2014/09/es6-modules-final.html#default-exports-one-per-module). — jfriend00, Jun 28 '17 at 15:53
see this https://stackoverflow.com/questions/41337709/in-reactjs-when-should-i-add-brackets-when-import/41338672#41338672, you can have only one default export in a file, so you can export the other as a named export — Shubham Khatri, Jun 28 '17 at 16:01

score 48 · Accepted Answer · answered Jun 28 '17 at 16:39

48

You can't have more than one default export.

Instead, use named exports.

// moduleName.js    

export const ConnectedUserList = connect(mapStateToProps, matchDispatchToProps)(UserList)

export const RealTimeApp = socketConnect(App);

Require the exports by name.

// otherModule.js
import { ConnectedUserList, RealTimeApp } from "./moduleName"

answered Jun 28 '17 at 16:39

AJcodez

31,780
20
84
118

1

Here, you haven't used export default. so we can write export default in any one function or variable? – Chetan Nada Nov 07 '22 at 11:59
1

@ChetanNada: yes :) – Prid Aug 06 '23 at 21:39

score 26 · Answer 2 · answered Jun 30 '17 at 08:48

You can mix default export and named export.

export default ConnectedUserList = connect(mapStateToProps, matchDispatchToProps)(UserList)

export const RealTimeApp = socketConnect(App);

And after, you can import your exports :

import ConnectedUserList, { RealTimeApp } from "./moduleName"

score 13 · Answer 3 · answered Aug 16 '19 at 18:18

13

One possibility I've not seen mentioned. You can have only one default export, but what you export can be an object with multiple members:

// MyModule.js
const componentA => () => {return <div>Component A</div>;}
const componentB => () => {return <div>Component B</div>;}

export default { componentA, componentB };

And then:

import MyModule from "./MyModule";

MyModule.componentA();

answered Aug 16 '19 at 18:18

Jeff Dege

11,190
22
96
165

9

You're not exporting a multiple, you're exhorting an object containing two members. – Jeff Dege Aug 24 '19 at 22:55
1

^exporting* an object containing two members, I believe. – stuckoverflow Jun 20 '21 at 19:51

score 6 · Answer 4 · edited Jan 21 '20 at 01:07

6

export default () => {
    return {export1, export2};
}

edited Jan 21 '20 at 01:07

TobiO

1,335
1
9
24

answered Jan 20 '20 at 23:41

williamcodes

340
4
18

I don't see why folks keep asserting this doesn't work, or that it's somehow exporting two objects. – Jeff Dege Feb 05 '20 at 21:41

Gass · Answer 5 · 2022-07-06T12:50:18.717

export default { constOne, constTwo } and import data from './data.js' will do the trick. To access the data in the target file, it would be like so: {data.constOne} or {data.constTwo}

Example

Lets say we have the following data.js file:

const summary = [  
  { label: 'Turned pro', content: '2020' },
  { label: 'Profession', content: 'Engineer' }
]
const reputation = [
  { community: 'Code Review', points: 176 },
  { community: 'Game Development', points: 101 }
]

export default { summary, reputation }

One way to import and use the data, would be like so:

import data from './data.js'

function App(){
  return (
     <div>
        {data.summary.map((el) => <p>{el.label}</p> )}
     </div>
  )
}

score 0 · Answer 6 · edited Mar 03 '23 at 09:07

0

There are two primary ways to export values with JavaScript: default exports and named exports. But you can use one or both of them in the same file. A file can have no more than one default export, but it can have as many named exports as you like.

edited Mar 03 '23 at 09:07

Eric Aya

69,473
35
181
253

answered Mar 03 '23 at 03:28

Prateek Yadav

9
1

ES6 how to do multiple default exports

6 Answers6

Example