What is the proper way to export createContainer in React components?

help
1

i have a working component where i’m doing this:

import React, {Component, PropTypes} from 'react';
import {createContainer} from 'meteor/react-meteor-data';

export default class Foo extends Component {
}

export default createContainer(() => {
}, Foo);

import Foo from '/imports/ui/components/Foo';

note that this is with meteor npm version 3.10.6.

i now have a test harness, with meteor npm version 3.10.9, where suddenly this is not allowed. in my server console:

   While building for web.browser:
   imports/ui/components/Foo.jsx:58: Only one default
   export allowed per module. (58:0)
  1. am i right in assuming that the later revision of npm is what’s disallowing this?
  2. what is the right way to handle export/import with createContainer?
2

You can only do one export default per file.

If you do

const Foo = class Foo extends Component {
}

const Container =  createContainer(() => {
}, Foo);

export {Foo, Container};

You can later import this with

import {Foo, Container} from 'yourfile.js'

This has nothing to do with NPM, just ES6-conventions.

3

i did try that earlier. my Foo component shows up on the page, but the createContainer code is not running. here is the rest of how i’m referencing it:

import {Foo, FooContainer} from '/imports/ui/components/Foo';

Template.registerHelper("Foo", function() {
    return Foo;
);

<div>
    {{> React component=Foo}}
</div>

note that i’m using Blaze+React. with the multiple export defaults, createContainer() ran automatically. what do i need to do to make it run now?

4

never mind, i got it working.

export class Foo extends Component {

export default createContainer(() => {

import Foo from '/imports/ui/components/Foo';
5

Just as a note, there is actually no need to export the component unless you are going to need that absent of it wrapped by createContainer.

6

Why is your import at the bottom? It would drive me crazy if I had to work with code like that. :wink: Try this, which should work fine:

import { createContainer } from 'meteor/react-meteor-data';
import Foo from '/imports/ui/components/Foo';

export default createContainer(() => {
  return {
    // props to pass into Foo
  }
}, Foo);

Notice I removed the first line importing React. You don’t need that since you don’t have any JSX in this file.

1 Like
7

no, import wasn’t at the bottom of the file, it was just a couple code snippets. i’m not a maniac :slight_smile:

1 Like