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.
Thank you SO MUCH for this post! Saved me from pulling my hair out, BIG TIME!
You are very welcome 🙂
Shortly after getting stuck on this I spent a while diving deeper into ES6 destructuring in general, for which I found this site incredibly useful.
Thank you indeed. Going now to make myself more coffee. 🙂
Thank you, your post was very helpful!
You just saved me 🙂
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!
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.
Yep. This just saved my arse big time.
Ahhhh , thank you! This was doing my head in 🙂
Thank you. This saved me a lot of time.
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.
There’s always something new to learn 🙂 Part of the fun / frustration cycle that makes software development what it is.
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.
Thanks…
Very helpful.
And there it is. Wish I would’ve found this at the beginning of my weekend.
Thank you so much!
No problem 🙂
A lot of frustration importing Link vs { Link }, then a google search led me here. Thanks for this explanation!
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.
Thanks a lot dude, After hours of searching its finally solved.
🙂 no problem, happy to help
I just wanted to tell you thanks man! I appreciate that!
thanks Jepser, glad I could help
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?
could it be the missing
import React from ‘react’;
incontent-body.jsx
?just a guess honestly.
Thanks for making this post! Helped me out.
Thank you! It solved my problem!
Thank you! So much hair pulling saved by this.
I’m not sure if being bald helps me, or whether problems like this caused all my hair to drop out in the first place :/
glad I could help all the same 🙂
awesome, thanks
GOD!!! Spent nearly 4 hours on this! Thank you!
PS: I H-A-T-E react with a passion.
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.
🙂 Glad I could help
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
Happy to help 🙂
OMG, cant believe that did the trick! Cheers!
Oh my buddha, thank you!
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.
Thanks for the solution. It really save a lot of my time.
Thanks, this helped me!
Thanks! Saved my butt!
Wow, thanks for this! I understood the difference between import {} and import, but that error message was completely dumbfounding! Now I see the connection!
Glad I could help 🙂
Thanks.. glad that you took time to tell the world about this… saved a lot of hours of nonsense.
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.
🙂 I know those feels 🙂
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.
Cool, glad I was able to help in some way 🙂
Thank you so much for this much needed help.