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

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?

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.

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;

    {{> React component=Foo}}

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?

never mind, i got it working.

export class Foo extends Component {

export default createContainer(() => {

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

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.

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

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