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.