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:

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:

And:

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.

Shares

Published by

Code Review

Code Review

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

38 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. 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.

  5. 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?

  6. 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.

  7. 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

  8. 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.

Leave a Reply

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