Meteor JS ReactMeteorData - CreateContainer - Super expression must either be null or a function

Question

After upgrading to Meteor 1.5 from 1.4, createContainer function from react-meteor-data gives the following error:

Uncaught TypeError: Super expression must either be null or a function, not undefined
    at exports.default (modules.js?hash=fb99b6a…:1144)
    at ReactMeteorData.jsx:6
    at ReactMeteorData.jsx:6
    at createContainer (createContainer.jsx:16)
    at AppContainer.jsx (AppContainer.jsx:8)

AppContainer.jsx:

import { Meteor } from 'meteor/meteor';

import { Session } from 'meteor/session';
import { createContainer } from 'meteor/react-meteor-data';

import App from '../layouts/App.jsx';

export default AppContainer = createContainer(props => {
  return {
    currentUser: Meteor.user(),
  };
}, App);

App file below, in constructor i am performing super(props) however error is still thrown

App.jsx:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      menuOpen: false,
      showConnectionIssue: false,
      headerTitle: null,
    };
    this.setHeaderTitle = this.setHeaderTitle.bind(this);
    this.logout = this.logout.bind(this);
  }

  logout() {
    Meteor.logout();
    this.context.router.replace(`/home`);
  }

  render() {
    ... omitted render function
  }
}

App.propTypes = {
  user: React.PropTypes.object,      // current meteor user
  connected: React.PropTypes.bool,   // server connection status
  loading: React.PropTypes.bool,     // subscription status
  menuOpen: React.PropTypes.bool,    // is side menu open?
  children: React.PropTypes.element, // matched child route component
  location: React.PropTypes.object,  // current router location
  params: React.PropTypes.object,    // parameters of the current route
};

App.contextTypes = {
  router: React.PropTypes.object,
};

export default App;

pirs pirs · Accepted Answer · 2017-06-04T09:53:13

Personnally, for a container data i do like this (from masterchef Base, updated and working as well) :

/* AppContainer.js */

// import react and proptypes ...
import { Meteor } from 'meteor/meteor';
import container from '../../../modules/container';

// Some code for app layout and proptypes...

export default container((props, onData) => {
  const user= Meteor.user(); // adapted for your case
  onData(null, {
    currentUser:user,
    // and others data ...
  });
}, App);




/* container.js */

import { compose } from 'react-komposer';
import getTrackerLoader from './get-tracker-loader';

export default function container(composer, Component, options = {}) {
  return compose(getTrackerLoader(composer), options)(Component);
}




/* get-tracker-loader.js */

import { Tracker } from 'meteor/tracker';

export default function getTrackerLoader(reactiveMapper) {
  return (props, onData, env) => {
    let trackerCleanup = null;

    const handler = Tracker.nonreactive(() => Tracker.autorun(() => {
      trackerCleanup = reactiveMapper(props, onData, env);
    }));

    return () => {
      if (typeof trackerCleanup === 'function') trackerCleanup();
      return handler.stop();
    };
  };
}

Hope it ll be useful.

Meteor JS ReactMeteorData - CreateContainer - Super expression must either be null or a function

3 Answers