Export multiple wrapper functions in Javascript ES6

Question

I'm using react-komposer to wrap React components with a data fetching wrapper.

It is very basic and I'd want to wrap multiple components in Meteor. But I can't figure out what the export pattern is?

Here is what I have (and gives me an "Unexpected Token" error - probably obvious if you understand this well!):

// myContainer.jsx
import Component1 from './Component1.jsx';
import Component2 from './Component2.jsx';

function composer(props, onData) {
  if (Meteor.subscribe('SingleTodoLists').ready()) {
    const todoList = todoLists.find({}).fetch();
    onData(null, { todoList });
  }
}

export composeWithTracker(composer, Loading)(Component1);
export composeWithTracker(composer, Loading)(Component2);

And I'd like to import them like this:

import { Component1, Component2 } from './myContainer.jsx';

This wrapper syntax is not really clear for me, so I'm unsure about what to try. Playing with export default and other variations yielded no result so far.

fabio.sussetto · Accepted Answer · 2016-11-02 13:39:38Z

2

If you don't use default exports, you need to name the things you export:

export const TrackedComponent1 = composeWithTracker(composer, Loading)(Component1);
export const TrackedComponent2 = composeWithTracker(composer, Loading)(Component2);

If you use default export instead you can omit the name, e.g.

export default composeWithTracker(composer, Loading)(Component1);

But you can only define one default export per module

See the documentation for the ES6 export syntax: https://developer.mozilla.org/en/docs/web/javascript/reference/statements/export

Update:

If you want to keep the original export names:

import _Component1 from './Component1.jsx';
import _Component2 from './Component2.jsx';

//... you code here

export composeWithTracker(composer, Loading)(_Component1);
export composeWithTracker(composer, Loading)(_Component2);

Because Component1.jsx uses a default exports, when you import it you can rename it as you want (e.g. _Component1, UntrackedComponent1, ...). Without a default export, you could have used import { Component1 } as _Component1 instead.

edited Nov 2, 2016 at 13:39

answered Nov 2, 2016 at 10:13

fabio.sussetto

7,0653 gold badges28 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Florian Bienefelt Over a year ago

Great! It is not really necessary, but is there really no way to use the original names Component1 and Component2? I could use a temporary variable and then reassign Component1 and 2 in the export, but that isn't really clean.

Menelaos Vergis Over a year ago

At your update the line export composeWithTracker(composer, Loading)(_Component1); shouldn't be export const Component = composeWithTracker(composer, Loading)(_Component1);?

Collectives™ on Stack Overflow

Export multiple wrapper functions in Javascript ES6

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related