7

I was looking at this code where a class instance is exported in a little bit weird way.

Providing a snipped. It is exported as follows:

    class RegisterStore {
    @observable success = false
    @observable failure = false
    @observable errors = {}
    ...
    }

export default new RegisterStore()
export { RegisterStore }

And it is imported as follows in index.js:

import registerStore from './stores/RegisterStore'
...
const stores = {
registerStore
...
}

Why are there two exports at the end of the first code? Is
export default new RegisterStore() AND
const NewRegisterStore = new RegisterStore(); export default NewRegisterStore are equivalent?

uneet7
  • 2,925
  • 7
  • 24
  • 41
  • Possible duplicate of [Export multiple classes in ES6 modules](https://stackoverflow.com/questions/38340500/export-multiple-classes-in-es6-modules) – kemicofa ghost Jan 26 '19 at 12:54
  • 1
    No no... please don't mark it as a duplicate. That answer doesn't answer my question, please. – uneet7 Jan 26 '19 at 12:59
  • 1
    No, they're not the same `export default new RegisterStore() export { RegisterStore }`. One exports by default the instance, and the second exports the class inside an object. Which if I'm not wrong can be imported like so: `import registerStore, {RegisterStore} from './stores/RegisterStore'` – kemicofa ghost Jan 26 '19 at 13:10
  • 1
    `export default const RegisterStore = new RegisterStore()` will most likely give an error as that does not look like a valid export. But theoretically it's the same as `export default new RegisterStore()` – kemicofa ghost Jan 26 '19 at 13:14

1 Answers1

18

No export default new RegisterStore() and export { RegisterStore } are not equal. In export { RegisterStore } you are exporting the class as a part of an export object while in export default new RegisterStore() you are exporting instance of class.

Further. export default new RegisterStore() should be enough to work fine. Exporting again line is useless until you dont want to import multiple variables from the same file. In that case it would be like:

export new RegisterStore();
export const anotherVariable = "TESTTEST";

and import like:

import {RegisterStore, anotherVariable} from './stores/RegisterStore';

Further to your last query: NO

export default new RegisterStore() AND 
export default const RegisterStore = new RegisterStore() are equivalent?

are not equivalent too.

Firstly export default const RegisterStore = new RegisterStore() throws error because RegisterStore is already declared as class and you are again declaring it with const.

Secondly:

export default const NewRegisterStore = new RegisterStore()

is also wrong because default exports have to be either exported as anonymous or the variables have to be declared first before exporting.

For your example it should be like:

let NewRegisterStore; export default NewRegisterStore = new RegisterStore();

So:

export default new RegisterStore() AND 

let NewRegisterStore; export default NewRegisterStore = new RegisterStore(); are equivalent

Please read more about "named export" and "export default" here

Gaurav Saraswat
  • 1,353
  • 8
  • 11
  • So for the last query `export default new RegisterStore()` **AND** `const RegisterStore = new RegisterStore() && export default RegisterStore` are **equivalent**? Right?? – uneet7 Jan 26 '19 at 14:33
  • 2
    @swissArmyKnife7. NO. there are many things wrong with export default const RegisterStore = new RegisterStore() . Identifier RegisterStore has already been declared. you can't do const RegisterStore again. secondly export default variable has to be declared and exported in single statement. It has to be either declared first or it just export default as as value. which is same thing. I just updated my answer. – Gaurav Saraswat Jan 26 '19 at 16:37
  • 2
    Yeah..it was exactly the last part of the answer that I was looking for – uneet7 Jan 26 '19 at 16:56