Reactjs: Warning: React.createElement: type should not be null or undefined

Question

this the full error

Warning: React.createElement: type should not be null or undefined. It should be a string (for DOM elements) or a ReactClass (for composite components).

and this is all I have in this view

import React, { Component } from 'react'; import Router, {Link, RouteHandler} from 'react-router'; import { Grid, Row, Column, List, ListItem } from '../../components/Layout'; import { RaisedButton, Paper } from 'material-ui';  const videosInformation = {   time      : 25,   gameId    : 15665,   date      : '12 10 2015',   gameName  : "Black Jack" };  export default class Home extends Component {    static contextTypes = {     router  : React.PropTypes.func   }      render () {     return <Grid>                          <Row>         <Column>           <Paper>             <List subheader="Player Info">               <ListItem primaryText={`Name: ${videosInformation.time}`} />               <ListItem primaryText={`Nickname: ${videosInformation.date}`} />               <ListItem primaryText={`Age: ${videosInformation.gameId}`} />               <ListItem primaryText={`Language: ${videosInformation.gameName}`} />             </List>           </Paper>         </Column>           <Column>           <iframe width="560" height="315" src="https://www.youtube.com/embed/Ta4xuThmAsQ" frameBorder="0" allowFullScreen></iframe>         </Column>       </Row>     </Grid>;   };  } 

I am using Material-UI

Answer 1

It is likely that your Layout file is not exporting one of the variables from this line

import { Grid, Row, Column, List, ListItem } from '../../components/Layout'; 

The warning would happen if one of those is undefined.

Answer 2

I know the right solution has been found here but I just wanted to share another possible reason for the ReactJS React.createElement: type should not be null or undefined warning to trigger.

It can also happens when you have a circular dependency in your modules. Then, doing a console.log() of your imported module would return an empty object.

For further details, have a look at this other stackoverflow thread: Require returns an empty object