CODEWITHSUNDEEP
javascript
Philip Pegden
Philip Pegden

Reputation: 2124

Why do some of these export statements fail?

Folks,

I am just curious, why this works: 

export default translate(['header'], { wait: true })(Component)

or this works:

let NewComponent  = translate(['header'], { wait: true })(Component)
export {NewComponent}

But this doesn't:

export translate(['header'], { wait: true })(Component)

And nor does this:

export {translate(['header'], { wait: true })(Component)} /* ERRORS */

Upvotes: 1

Views: 40

Answers (1)

chazsolo
chazsolo

Reputation: 8429

For reference: Guide on exports from MDN

There are two types of exports: named, and default.

In your invalid examples, the following export:

export translate(['header'], { wait: true })(Component)

...doesn't work because the result of the expression cannot be identified as a named export (you've given it no name), and it's not marked as default. If you're curious as to how this differs when you compare it to the first example with default being set, think about how you would reference it in an import:

// Valid example

// exporting in exports.js
export default translate(['header'], { wait: true })(Component);

// importing it another file
import translateResult from './exports.js';



// Invalid example

// exporting in exports.js
export translate(['header'], { wait: true })(Component);

// importing in another file
// since it's not named, and there is no default, it has no reference.
import ?? from './exports.js';
import { ?? } from './exports.js';

The following export:

export {translate(['header'], { wait: true })(Component)} /* ERRORS */

...doesn't work because it's syntactically incorrect. However, had you named the result of this expression before hand, it would not throw an error (at least, not because of the export):

const translateResult = translate(['header'], { wait: true })(Component);
export { translateResult }; // works

Upvotes: 3

Related Questions