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.

28 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?

Leave a Reply

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