How I Fixed: Warning: React.createElement: type should not be null, undefined, boolean, or number.

I’ve been going through a lot of React JS training materials and tutorials as of late, and am slowly getting the point where I try to do it myself first, without simply typing out the tutorial pages.

Tonight, I hit upon a fun issue which I couldn’t find an immediate Google / Stack Overflow answer for. Perhaps my Google-foo is weak.

The example I was working from was the brilliant Redux Reddit API tutorial from the official Redux docs.

The two errors I kept running into were:

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of `AsyncApp`.

// and

Uncaught Invariant Violation: 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 `AsyncApp`.

Both found in the browser console log, and stopped the app from rendering.

The solution here is really straightforward, but let’s see the code I was using, to see if you can spot the problem first:

import React, { Component } from 'react';
import { fetchPosts } from '../actions/actions';
import { Posts } from '../components/Posts';

export default class AsyncApp extends Component {

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <Posts />
    );
  }
}

And:

import React, { Component } from 'react';

export default class Posts extends Component {
  render() {
    return (
      <ul>
        <li>hello 1</li>
        <li>hello 2</li>
        <li>hello 3</li>
      </ul>
    );
  }
}

The cause was certainly not immediately obvious to me. But here’s the issue:

export default class Posts extends Component

and then, in AsyncApp I was doing:

import { Posts } from '../components/Posts';

Well, if the class being exported is default then the import statement should instead be :

import Posts from '../components/Posts';

I found this Stack Overflow explanation very helpful in expanding my understanding of why this issue occurred.

Published by

Code Review

CodeReviewVideos is a video training site helping software developers learn Symfony faster and easier.

48 thoughts on “How I Fixed: Warning: React.createElement: type should not be null, undefined, boolean, or number.”

  1. It feels kind of dumb now that I see what I did, but it wasn’t something I had paid much attention to until now. I actually the exact opposite and accidentally left “default” out but was requesting the component as if it was default. THANKS for the post!

    1. hindsight is a wonderful thing 🙂

      Thing is, you could be told that / read it in a book (along with 30 other concepts in a chapter), and still forget it when it comes up during a coding session. It’s only once it bites you – and costs you time – that it sinks in and (hopefully) you won’t make the same mistake in the future.

      At least, that’s how it works for me.

  2. Thanks a lot!! I was struggling with this. Unfortunately, at the moment i found out this, i haven´t read about how “export” and “default” works.

  3. Dude, you just saved my evening. Spent the last 20 minutes pouding my head against the wall. Such a simple mistake but the error message is so obtuse.

  4. And there it is. Wish I would’ve found this at the beginning of my weekend.

    Thank you so much!

  5. A lot of frustration importing Link vs { Link }, then a google search led me here. Thanks for this explanation!

  6. Echoing the others. Thank you!

    Should it help someone else, in my case I had forgot to `export` the `Component` I was trying to import. It threw the same error.

  7. Hey,
    Thanks for the post, but that unfortunately did not fix my issue not sure if I may still be doing something wrong here, but here is what I am doing

    User.jsx Component
    import React from ‘react’

    export default class UserPage extends React.Component {
    function render() {
    return(

    );
    }
    }

    class UserList extends React.Component {
    function render() {
    return(
    {/* jsx code */}
    );
    }
    }
    class User extends React.Component {
    function render() {
    return(
    {/* jsx code */}
    );
    }
    }
    ==========================================================
    content-body.jsx file
    ————————————–
    import UserPage from ‘./page/user.jsx’;

    export default class ContentBody extends React.Component {

    constructor(props) {
    super(props)
    this.state = {data: []};
    }

    render() {
    return(

    {/* This should be dynamic and replaced with Router */}

    );
    }
    }

    It still throws that error for me, not sure what I am doing wrong here?

  8. Thank you, kind stranger. I was so frustrated by this and it turned out I was totally wrong in one of my imports. This was driving me mad.

  9. Such a silly error on my part. Thanks for the post. Just starting to learn react and I could not track down the err for the life of me

  10. If you are trying this fix and it doesn’t seem to be working, it could be that the component that you’re importing is itself importing other components incorrectly. There goes 2 hours of my life.

  11. Wow, thanks for this! I understood the difference between import {} and import, but that error message was completely dumbfounding! Now I see the connection!

  12. Thanks.. glad that you took time to tell the world about this… saved a lot of hours of nonsense.

  13. What an unbelievably stupid thing for me to have missed in retrospect. Thank goodness I came across this or my app would’ve been nothing but console logs and tears.

  14. Thanks for this. While I didn’t have exactly the same issue you describe it certainly got me asking the right question…

    In my case I had refactored out a sub-component into it’s own file and forgot to add the export to the new file.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.