How can I have multiple default exports in reactjs?

ThatGuyNick 0
Viewed 19

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...

error-handling reactjs javascript
1 Answers

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

Tushar Shahi0
Related