what is the proper way to use createContainer() in Meteor + Blaze + React?

Question

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';

i am using Blaze to wrap the React components, like this:

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

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

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

i realize that i shouldn't be doing multiple default exports in a single file, but it does work. note that this is with these versions: Meteor v1.4.1.1, Meteor npm v3.10.6, Meteor node v4.5.0.

i now have a test harness, with Meteor v1.4.2.3, Meteor npm v3.10.9 and Meteor node v4.6.2, where this has stopped working. not surprisingly, in my server console:

While building for web.browser:
imports/ui/components/Foo.jsx:58: Only one default export allowed per module. (58:0)

so now i'm looking for a way to get this back working, and in the proper way.

what i've tried:

first, keeping the component and the create container in the same file, i did proper ES6 exporting:

const Foo = class Foo extends Component {

const FooContainer = createContainer(() => {

export {Foo, FooContainer};

... and imported Foo.

result: Foo loaded in the app, but the container code never ran.

second, i put the component and the create container in two different files, and reverted to exporting defaults:

// Foo.jsx    
export default class Foo extends Component {

// FooContainer.jsx
export default createContainer(() => {

... and used Foo:

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

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

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

result: Foo loaded in the app, but the container code never ran.

third, similar to the above, but i instead tried putting FooContainer on the page:

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

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

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

result: big error message from React that basically i wasn't doing it right.

any idea on the proper way to get this to work?

update:

attempts 4 and 5

put both back into same class, like this:

export class Foo extends Component {

export default createContainer(() => {

... with 2 different ways of importing it:

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

that ran createContainer() but did not put my component on the page.

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

that did the opposite: did not run createContainer(), but i did see the component.

Answer 1

got it working, in 1 jsx file:

export class Foo extends Component {

export default createContainer(() => {

in the helper, relying on the default export:

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

the actual problem was i had incorrectly imported a server file to publish, and that caused a chain reaction which caused the component to not render. doh.