material-ui: Error: Element type is invalid (After updating to ver 0.15.4)

问题

I have recently updated material-ui to version 0.15.4 from 0.14.4 . I had to add getMuiTheme() to make it work in few components. But in one of the components, I am getting the following error and I am not able to understand what's happening.

Error: "Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of PortalPage"

Code Snippet:

var React = require('react'),
  mui = require('material-ui'),
  Router = require('react-router'),
  axios = require('axios'),
  AppCanvas = mui.AppCanvas,
  AppBar = mui.AppBar,
  MenuItem = mui.MenuItem,
  //MenuItem = require('material-ui/lib/menus/menu-item')
  FlatButton = mui.FlatButton,
  PageWithNav = require('./page-with-nav.jsx'),
  getMuiTheme = require('material-ui/styles/getMuiTheme').default,
  darkBaseTheme = require('material-ui/styles/baseThemes/darkBaseTheme');
  //ThemeManager = require('material-ui/lib/styles/theme-manager');


var PortalPage = React.createClass({
  mixins: [Router.Navigation],

  getChildContext: function() {
    return {
      muiTheme: getMuiTheme(darkBaseTheme),
    };
  },

  childContextTypes: {
    muiTheme: React.PropTypes.object
  },


  getInitialState: function() {
    return {
      loggedIn: auth.loggedIn()
    };
  },

  setStateOnAuth: function(loggedIn) {
    this.setState({
      loggedIn: loggedIn
    });
  },

  componentWillMount: function() {
    auth.onChange = this.setStateOnAuth;

    // If they aren't logged in, send them back to the home screen
    if (!auth.loggedIn()) this.transitionTo('/');
  },

  render: function() {

    var logOutButton = (
    <FlatButton
      secondary={ true }
      label="Log Out"
      className="log-out-button"
      onTouchTap={ this._onLogOutButtonTouchTap } />
    );

    var menuItems = [
      {
        //     type: MenuItem.Types.SUBHEADER,
        text: 'Portal 1'
      },
      {
        route: 'portal-2',
        text: 'Portal 2'
      },
      {
        route: 'portal-3',
        text: 'Portal 3'
      }
    ];

    // nav bar is different for family users and doctors
    if (auth.isUser()) {
      menuItems = [
        {
          //      type: MenuItem.Types.SUBHEADER,
          text: 'Portal 4'
        },
        {
          route: 'portal-5',
          text: 'Portal 5'
        }
      ];
    }

    return (
      <AppCanvas predefinedLayout={ 1 }>
        <AppBar
          className="mui-dark-theme"
          iconElementRight={ logOutButton }
          onRightIconButtonTouchTap={ this._onLogOutButtonTouchTap }
          zDepth={ 0 } />
        <PageWithNav menuItems={ menuItems } />
      </AppCanvas>
    )
  },

  _onLogOutButtonTouchTap: function() {

    // Delete our user token
    auth.logout();

    // Tell the server to destroy our session, and clear our auth header
    axios.get(this.props.destroySessionUrl);
    axios.defaults.headers.common['Authorization'] = "";

    this.transitionTo('/');
  }
});

module.exports = PortalPage;

Any help would be highly appreciated. Thanks !

来源：https://stackoverflow.com/questions/39164577/material-ui-error-element-type-is-invalid-after-updating-to-ver-0-15-4

标签

reactjs

material-ui