javascriptreactjsmeteormeteor-react

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


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;

Solution

  • 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.