How can I have multiple default exports in reactjs?

Question

I am getting A module cannot have multiple default exports when i setup my constants/varConstants.js file.

export default VARIABLE1 = 'VARIABLE1'
export default VARIABLE2 = 'VARIABLE2'
export default VARIABLE3 = 'VARIABLE3'
export default VARIABLE4 = 'VARIABLE4'

my reducers/reducer.js file should call on those constants as import {VARIABLE1,VARIABLE2,VARIABLE3,VARIABLE4 from /constants/varConstants for my reducer function.

how can i fix the errors above? Errors are squiggly lines under export default var...

Looks like duplicate https://stackoverflow.com/questions/54810022/how-to-use-multiple-export-default-in-react — man.in.the.jukebox, Sep 07 '22 at 17:09
Does this answer your question? [How to use multiple \`export default \` in react](https://stackoverflow.com/questions/54810022/how-to-use-multiple-export-default-in-react) — Robert P, Sep 07 '22 at 17:11

score 2 · Answer 1 · answered Sep 07 '22 at 17:07

When you import like this :

import {VARIABLE1,VARIABLE2,VARIABLE3,VARIABLE4 from /constants/varConstants

it is not default export. This is named export only. There can only be on default export from a module. Hence the name default.

Export like this to have multiple named exports.

const VARIABLE1 = 'VARIABLE1'
const VARIABLE2 = 'VARIABLE2'
const VARIABLE3 = 'VARIABLE3'
const VARIABLE4 = 'VARIABLE4'
export { VARIABLE1,VARIABLE2,VARIABLE3,VARIABLE4 };

Then you can use the import statement you are expecting.

Alternatively, you could have done:

export const VARIABLE1 = 'VARIABLE1'
export const VARIABLE2 = 'VARIABLE2'
export const VARIABLE3 = 'VARIABLE3'
export const VARIABLE4 = 'VARIABLE4'

But i prefer the former. That way I can quickly see what all I am exporting (in case I am not exporting all the variables).

Here is a doc

How can I have multiple default exports in reactjs?

1 Answers1