Meteor 1.3 Webpack Invariant Violation: Should provide a child component to build the higher order container

help
1

I am trying to use the React-Kcomposer v1.8 into my project.

React v15
Webpack v1.2
Meteor v1.3.2.4

When I started the project, I got an error.
browser.js?9520:40 Uncaught Invariant Violation: Should provide a child component to build the higher order container.

ListPostsContainer.js
`import React from ‘react’;
import ListPosts from ‘…/components/post/ListPosts.jsx’;
import {composeWithTracker, composeAll} from ‘react-komposer’;

function composer( props, onData ) {
const subscription = Meteor.subscribe(‘topics’);

if ( subscription.ready() ) {
const postsList = Topics.find().fetch();
onData( null, { postsList } );
}
};

// export default composeWithTracker(composer)(ListPosts);

export default composeWithTracker(composer)(ListPosts);`

ListPosts.jsx
export class ListPosts extends React.Component { render() { return ( <div> <h3>This is the post list</h3> </div> ); } };

Then use the react-mounter to mount the container in the routes.jsx

Please help

2

Hi @ansonlau3,

I’m pretty sure I have run into the exact same problem. I think this is because link here. The composeWithTracker expects a stateless component.

As soon as you use the export class, as opposed to export const, it craps itself. Thanks so much.

Tat

3

I have been using it with export class… I am running into this issue while trying to wrap a material-ui dialog form with komposer container.

4

Hi,

It is messy the first time, but pretty simple after that. (Like so many things i guess).

(1) Have a page where you call the container… This is from a page called operations for me…

import React from 'react';

import OperationsCont from '../containers/operations-cont.js';

export const Operations = () => (
  <OperationsCont />
);

(2) Then your container looks like…

import { composeAll, composeWithTracker } from 'react-komposer';
import { Loading } from '../components/layout/loading.js';
import { Meteor } from 'meteor/meteor';

import { OperationsList } from '../components/operations/operations-list.js';

const composerUsers = (params, onData) => {
  const subscription = Meteor.subscribe('users-list');
  if (subscription.ready()) {
    const users = Meteor.users.find().fetch();
    onData(null, { users });
  }
};

[ ... other composers here ... ]

export default composeAll(
  composeWithTracker(composerUsers, Loading, null, { pure: false }),
  [.... more composers here... ]
)(OperationsList);

(3) The use whatever material ui components you need… It should be noted that as you are bringing in the collections via props, it works quite well with say Autocomplete etc from material ui.

Thanks so much.

Tat