title: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got : undefined
body: <p>I have setup my react project on production server.I am getting this error.</p>
  
  <blockquote>
    <p>Uncaught Error: Element type is invalid: expected a string (for
    built-in components) or a class/function (for composite components)
    but got: undefined. You likely forgot to export your component from
    the file it's defined in.</p>
  </blockquote>
  
  <p>Here is my code:</p>
  
  <p><strong>Component.js</strong></p>
  
  <pre><code>import React, { Component, PropTypes } from 'react'
  import { Match, Link, Redirect } from 'react-router'
  import AppBar from 'material-ui/AppBar'
  import IconButton from 'material-ui/IconButton'
  import IconMenu from 'material-ui/IconMenu'
  import MenuItem from 'material-ui/MenuItem'
  import FlatButton from 'material-ui/FlatButton'
  import MoreVertIcon from 'material-ui/svg-icons/navigation/more-vert'
  import Snackbar from 'material-ui/Snackbar'
  
  import Home from '../Home/container'
  import login from '../login/container'
  import About from '../About/container'
  import Management from '../Management/container'
  import EditVenue from '../EditVenue/container'
  import Users from '../Users/container'
  import UserInfo from '../UserInfo/container'
  import Review from '../Review/container'
  import Places from '../Places/container'
  import PlacesDetailStage from '../PlacesDetailStage/container'
  import PlacesDetails from '../PlacesDetails/container'
  import ViewPlacesProfile from '../ViewPlacesProfile/container'
  import EditProfile from '../EditProfile/container'
  import PlacesProfile from '../PlacesProfile/container'
  import ViewPlace from '../ViewPlace/container'
  import ViewPlaceStage from '../ViewPlaceStage/container'
  import Booking from '../Booking/container'
  import Bookinghistory from '../Bookinghistory/container'
  import CategoriesAndSection from '../CategoriesAndSection/container'
  import config from '../../config'
  import firebase from '../../config/firebase'
  import * as Phase from '../../constants/phase'
  
  // import Reviews from '../AllReview/container'
  //import logo from './logo.svg'
  import './styles.scss'
  
  const INDEX_ROUTE = config.INDEX_ROUTE
  console.info('INDEX_ROUTE', INDEX_ROUTE)
  
  export const storageKey = 'bordie123'
  
  export const isAuthenticated = () =&gt; {
    return !!firebase.auth().currentUser || !!localStorage.getItem(storageKey)
  }
  
  export default class App extends Component {
  
    static propTypes = {
      windowResized: PropTypes.func.isRequired,
      windowWidth: PropTypes.number.isRequired,
      windowHeight: PropTypes.number.isRequired,
      loggedIn: PropTypes.bool,
      userStore: PropTypes.object
    }
  
    static defaultProps = {
      loggedIn: true
    }
  
    constructor(props) {
      super(props)
      this.handleResize = this.onResize.bind(this)
      this.goToHome = this.goToHome.bind(this)
      this.goToVenues = this.goToVenues.bind(this)
      this.goToAbout = this.goToAbout.bind(this)
      this.handleSignOut = this.handleSignOut.bind(this)
      this.goToUsers = this.goToUsers.bind(this)
      this.goToPlaces = this.goToPlaces.bind(this)
      this.goToPlacesDetailStage = this.goToPlacesDetailStage.bind(this)
      this.goToPlacesDetails = this.goToPlacesDetails.bind(this)
      this.goToViewPlacesProfile = this.goToViewPlacesProfile.bind(this)
      this.goToReview = this.goToReview.bind(this)
      this.goToCategoriesAndSection = this.goToCategoriesAndSection.bind(this)
      this.goToBooking = this.goToBooking.bind(this)
  
      this.handleCloseSnack = this.handleCloseSnack.bind(this)
      this.state = {
        userCreated: false,
        userUpdated: false
      }
    }
  
    componentWillReceiveProps(nextProps) {
      const prevUserStore = this.props.userStore
      const userStore = nextProps.userStore
  
      const prevPostPhase = prevUserStore.get('postPhase')
      const postPhase = userStore.get('postPhase')
  
      const prevPutPhase = prevUserStore.get('putPhase')
      const putPhase = userStore.get('putPhase')
  
      if (prevPostPhase === Phase.LOADING &amp;&amp; postPhase === Phase.SUCCESS) {
        this.setState({
          userCreated: true
        })
      }
    }
  
    handleCloseSnack(key) {
      const state = {}
      state[key] = false
      this.setState(state)
    }
  
    componentDidMount() {
      window.addEventListener('resize', this.handleResize)
      this.handleResize()
  
      firebase.auth().onAuthStateChanged((user) =&gt; {
        if (user) {
          window.localStorage.setItem(storageKey, user.uid)
          this.setState({ uid: user.uid })
        } else {
          window.localStorage.removeItem(storageKey)
          this.setState({ uid: null })
        }
      })
    }
  
    componentWillUnmount() {
      window.removeEventListener('resize', this.handleResize)
    }
  
    onResize(/* event */) {
      this.props.windowResized(window.innerWidth, window.innerHeight)
    }
  
    goToHome() {
      //this.context.router.transitionTo(`${config.INDEX_ROUTE}/`)
      this.context.router.transitionTo('/')
    }
    goToVenues() {
      //this.context.router.transitionTo(`${config.INDEX_ROUTE}/venues`)
      this.context.router.transitionTo('/venues')
    }
    goToUsers() {
      this.context.router.transitionTo('/users')
    }
    goToPlaces() {
      this.context.router.transitionTo('/places')
    }
    goToPlacesDetails() {
      this.context.router.transitionTo('/placesDetails')
    }
    goToPlacesDetailStage() {
      this.context.router.transitionTo('/PlacesDetailStage')
    }
    goToViewPlacesProfile() {
      this.context.router.transitionTo('/ViewPlacesProfile')
    }
    goToAbout() {
      this.context.router.transitionTo('/about')
    }
  
    goToReview() {
      this.context.router.transitionTo('/review')
    }
    goToCategoriesAndSection() {
      this.context.router.transitionTo('/CategoriesAndSection')
    }
    goToBooking() {
      this.context.router.transitionTo('/booking')
    }
  
    handleSignOut() {
      console.info('Sign Out')
      firebase.auth().signOut().then((user, error) =&gt; {
        this.setState({ redirect: true })
      })
    }
  
  
    render() {
      const Logged = (props) =&gt; (
        &lt;IconMenu
          {...props}
          iconButtonElement={
            &lt;IconButton&gt;&lt;MoreVertIcon /&gt;&lt;/IconButton&gt;
          }
          targetOrigin={{
            horizontal: 'right',
            vertical: 'top'
          }}
          anchorOrigin={{
            horizontal: 'right',
            vertical: 'top'
          }}
        &gt;
          &lt;MenuItem
            primaryText="Home"
            value="/"
            onTouchTap={this.goToHome}
          /&gt;
          &lt;MenuItem
            primaryText="Venues"
            value="/venues"
            onTouchTap={this.goToVenues}
          /&gt;
          &lt;MenuItem
            primaryText="Reviews"
            value="/review"
            onTouchTap={this.goToReview}
          /&gt;
          &lt;MenuItem
            primaryText="Users"
            value="/users"
            onTouchTap={this.goToUsers}
          /&gt;
          &lt;MenuItem
            primaryText="Places"
            value="/places"
            onTouchTap={this.goToPlaces}
          /&gt;
          &lt;MenuItem
            primaryText="Places Details"
            value="/placesDetails"
            onTouchTap={this.goToPlacesDetails}
          /&gt;
          &lt;MenuItem
            primaryText="PlacesDetailStage"
            value="/PlacesDetailStage"
            onTouchTap={this.goToPlacesDetailStage}
          /&gt;
          &lt;MenuItem
            primaryText="Places Profiles"
            value="/ViewPlacesProfile"
            onTouchTap={this.goToViewPlacesProfile}
          /&gt;
          &lt;MenuItem
            primaryText="Categories&amp;Sections"
            value="/CategoriesAndSection"
            onTouchTap={this.goToCategoriesAndSection}
          /&gt;
          &lt;MenuItem
            primaryText="Booking"
            value="/booking"
            onTouchTap={this.goToBooking}
          /&gt;
          &lt;MenuItem
            primaryText="About"
            value="/about"
            onTouchTap={this.goToAbout}
          /&gt;
          &lt;MenuItem
            primaryText="Sign out"
            value="/logout"
            onTouchTap={this.handleSignOut}
          /&gt;
        &lt;/IconMenu&gt;
      )
      // const { windowWidth, windowHeight } = this.props
  
  
      return (
        &lt;div className="App"&gt;
          &lt;nav className="App-mainNav"&gt;
            {/*&lt;img src={logo} className="App-logo" alt="logo" /&gt;
            &lt;h2&gt;Welcome to Are You Bored&lt;/h2&gt;*/}
            &lt;AppBar
              title="Bordie Development"
              iconElementRight={isAuthenticated() ? &lt;Logged /&gt; : (&lt;Redirect to={{ pathname: '/login' }} /&gt;)}
            /&gt;
          &lt;/nav&gt;
          &lt;div className="App-pageContainer"&gt;
            {/*&lt;Match exactly pattern={`${INDEX_ROUTE}/`} component={Home} /&gt;
            &lt;Match exactly pattern={`${INDEX_ROUTE}/management`} component={Management} /&gt;
            &lt;Match pattern={`${INDEX_ROUTE}/management/edit/:VenueID`} component={EditVenue} /&gt;
            &lt;Match pattern={`${INDEX_ROUTE}/about`} component={About} /&gt;*/}
            &lt;Match exactly pattern="/" component={Home} /&gt;
            &lt;Match pattern="/venues/:VenueID/:part" component={EditVenue} /&gt;
            &lt;Match exactly pattern="/venues/:VenueID" component={EditVenue} /&gt;
            &lt;Match pattern="/ViewPlacesProfile/:ProfileID" component={EditProfile} /&gt;
            &lt;Match exactly pattern="/users/:UserID" component={UserInfo} /&gt;
            &lt;Match exactly pattern="/users" component={Users} /&gt;
            &lt;Match exactly pattern="/users/" component={Users} /&gt;
            &lt;Match exactly pattern="/review" component={Review} /&gt;
            &lt;Match exactly pattern="/places" component={Places} /&gt;
            &lt;Match exactly pattern="/CategoriesAndSection" component={CategoriesAndSection} /&gt;
            &lt;Match exactly pattern="/placesProfile" component={PlacesProfile} /&gt;
            &lt;Match exactly pattern="/ViewPlacesProfile" component={ViewPlacesProfile} /&gt;
            &lt;Match exactly pattern="/PlacesDetailStage" component={PlacesDetailStage} /&gt;
            &lt;Match exactly pattern="/placesDetailStageSearch/:search" component={PlacesDetailStage} /&gt;
            &lt;Match exactly pattern="/placesDetailStage/:googlePlaceID" component={ViewPlaceStage} /&gt;
            &lt;Match exactly pattern="/placesDetailStage/:googlePlaceID/:part" component={ViewPlaceStage} /&gt;
            &lt;Match exactly pattern="/placesDetailStage/:googlePlaceID/:part/" component={ViewPlaceStage} /&gt;
            &lt;Match exactly pattern="/placesDetailStage/:googlePlaceID/:part/:search" component={ViewPlaceStage} /&gt;
            &lt;Match exactly pattern="/placesDetails" component={PlacesDetails} /&gt;
            &lt;Match exactly pattern="/placesDetails/:googlePlaceID/:part" component={ViewPlace} /&gt;
            &lt;Match exactly pattern="/placesDetails/:googlePlaceID" component={ViewPlace} /&gt;
            &lt;Match exactly pattern="/login" component={login} /&gt;
            &lt;Match exactly pattern="/login/" component={login} /&gt;
            &lt;Match exactly pattern="/review/" component={Review} /&gt;
            &lt;Match exactly pattern="/venues" component={Management} /&gt;
            &lt;Match exactly pattern="/venues/" component={Management} /&gt;
            &lt;Match exactly pattern="/about" component={About} /&gt;
            &lt;Match exactly pattern="/about/" component={About} /&gt;
            &lt;Match exactly pattern="/booking" component={Booking} /&gt;
            &lt;Match exactly pattern="/booking/:bookingPlaceID" component={Bookinghistory} /&gt;
          &lt;/div&gt;
  
          &lt;Snackbar
            open={this.state.userCreated}
            message="New User Created!"
            autoHideDuration={5000}
            onRequestClose={this.handleCloseSnack.bind(this, 'userCreated')}
          /&gt;
  
          &lt;Snackbar
            open={this.state.userUpdated}
            message="User updated successfully!"
            autoHideDuration={5000}
            onRequestClose={this.handleCloseSnack.bind(this, 'userUpdated')}
          /&gt;
  
        &lt;/div&gt;
      )
    }
  }
  
  App.contextTypes = {
    router: PropTypes.object
  }
  </code></pre>
  
  <p><strong>Index.js</strong></p>
  
  <pre><code>import React from 'react'
  import ReactDOM from 'react-dom'
  import { Provider } from 'react-redux'
  import { BrowserRouter } from 'react-router'
  import getMuiTheme from 'material-ui/styles/getMuiTheme'
  import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
  import injectTapEventPlugin from 'react-tap-event-plugin'
  
  import store from './store'
  import AppContainer from './views/App/container'
  import config from './config'
  import './index.scss'
  
  const { INDEX_ROUTE } = config
  
  const ctaColor = '#ff69b4'
  const muiTheme = getMuiTheme({
    palette: {
      primary1Color: ctaColor
    }
  })
  
  // Needed for onTouchTap
  // http://stackoverflow.com/a/34015469/988941
  injectTapEventPlugin()
  
  // if (localStorage.userAuth) {
  ReactDOM.render(
    &lt;MuiThemeProvider muiTheme={muiTheme}&gt;
      &lt;Provider store={store}&gt;
        &lt;BrowserRouter basename={INDEX_ROUTE}&gt;
          &lt;AppContainer /&gt;
        &lt;/BrowserRouter&gt;
      &lt;/Provider&gt;
    &lt;/MuiThemeProvider&gt;,
    document.getElementById('root')
  )
  </code></pre>