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:


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.

Basic React ES6 Class Example

Sometimes it’s the super easy stuff I forget how to do.

It’s really straightforward to create a WebStorm Live Template for a React ES6 Class template.

But when you’re first starting to learn things like this, I find just repeatadly typing it out every time I want to make a new React ES6 class really helps grind it into my memory: