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

score 34 · Accepted Answer · answered Aug 04 '15 at 01:24

34

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.

answered Aug 04 '15 at 01:24

Ed Ballot

3,405
1
17
24

actually it was because I had `List, ListItem` in that line you said. Just change those components and move to `material-ui` import line and that's is. I felt so stupid haha thanks – Non Aug 04 '15 at 01:27

score 6 · Answer 2 · edited May 23 '17 at 11:53

6

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

edited May 23 '17 at 11:53

Community

1
1

answered Oct 26 '16 at 13:57

pjehan

820
10
18

1

Circular dependency triggered the error in my case. React's error description sucks. – mechanicious Dec 16 '16 at 21:08

score 3 · Answer 3 · answered Oct 06 '17 at 12:58

Just in case anyone has run into this issue and the above solutions are not helping, all I had to do was move my top-level ReactDOM.render() function below the rest of the JavaScript to ensure all variables were initialized before being called. I was following the tutorial at https://reactjs.net/getting-started/tutorial_aspnet4.html

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

3 Answers3