If you've ever watched any my reactor javascript videos you may have noticed that it seems like whenever 2
I write code and execute it it always works the very first time. 3
Well obviously since I'm making a video I'm going to make sure the code works ahead of time. 4
But I'll tell you without doubt I make just as many errors as anyone else and I have to spend a tremendous 5
amount of time debugging applications. 6
I want to take some time and walk through the four most common errors that I encounter in re-act application 7
. 8
So these are errors that I see all the time very frequently especially with people who are just starting 9
out with reactive element. 10
But let's walk through them. 11
I've got a sample application here and a sample fabrication is very simple in nature. 12
It just takes a list of image you else and renders one thumbnail a component for each. 13
So it is a react and redox application. 14
The buttons on here don't do anything. 15
There is no fancy functionality. 16
It literally just shows some thumbnail components. 17
So let's take a glance at the code. 18
I have a thumbnails component which is responsible for taking a list of images and rendering one thumbnail 19
for each image. 20
I have one other component called app as well and apps purpose is just to fetch some images and then 21
show those images inside of the thumbnails component. 22
So pretty straightforward application. 23
Let's walk through the first most absolute most common error that I see all the gosh darn time. 24
I can go back over to the thumbnails file. 25
So this is the thumbnails component and at the very bottom I've got my export default statement. 26
So this is where I export the component out of this file and I'm just going to go ahead and I'm going 27
to delete this. 28
So just throw it into the wind. 29
We don't we aren't exporting anything out of here anymore. 30
Let's look back over the browser and do a refresh and then we're going to see the first error message 31
that I see all that all the time. 32
So it's the first one on the list here says re-act create element type should not be Noal undefined 33
Boolean OR number. 34
So this is a very common error message. 35
I see all the time. 36
Let's let's talk about exactly what's going wrong here. 37
So obviously I deleted the export statement at the bottom as files so you know we can reasonably assume 38
that nothing is being exported from this file anymore. 39
So what effect would that have in our application. 40
Well if we flip back over to the app component we have our import statement for the thumbnails component 41
at the top so our thumbnails file is no longer exporting anything. 42
But that's doesn't that doesn't change the fact that this is still a valid import statement. 43
The result is that this thumbnails variable right or ends up as being undefined. 44
And so when we try to use it this is literally as if we were trying to render a component undefined 45
. 46
And so that's the error message that we see here. 47
The component types should not be null undefined Boolean OR number. 48
We could probably just as easily get this error message if we did something like this or something like 49
this or a number like so if we are not placing a valid re-act component in our GSX. 50
Are you going to see this error message. 51
So the net result here is if you see this error message type should be should not be null undefined 52
or boolean. 53
Check your import statements. 54
Check your export statements. 55
Dusun console logs if you have to because chances are what's going wrong is you are trying to render 56
a component that you think exists but actually does not at all. 57
So that's big error message number one. 58
I'm going to uncomment or I'm going to excuse me I'm going to restore the export statement at the bottom 59
of thumbnails and so now my application should be running again successfully and it looks like it is 60
very good. 61
Now step 2 or the next error message. 62
I I should say the next most common error message I see all the gosh darn time. 63
I have a reducer called Images reducer and this CLECs a action called fetching images and this action 64
not payload is an array of strings where each string is the world for a particular image. 65
So suffice it to say this reduce or basically just accumulate some data. 66
You know nothing too crazy here as you just saw in the browser. 67
Looks like everything is working just fine. 68
So let's go ahead and break this and just go out and see what happens. 69
At the very top here. 70
I'm going to remove the braces from fetch image like so. 71
So this does not break my import statement at all. 72
I'm going to save this. 73
I'm going to flip back over and refresh. 74
I don't have an error message here. 75
If I flip back over to my terminal You'll notice I also don't have an error message here either. 76
So by removing her curly braces around our import statement on our action types. 77
Still completely valid code. 78
So in this case we don't actually see an error message but the result is that fetched images just like 79
it was in the last example is going to come up as undefined again. 80
So we would essentially have a case undefined 81
so the most common are. 82
You know again this doesn't really manifest itself as with an air message per se. 83
What ends up happening is you and you're going to save yourself my reducer is not doing anything after 84
I call an action creator. 85
I call an action creator. 86
I know what's being called the action is coming into the reducer. 87
But still the reducer isn't doing anything about it. 88
And when I can prove it to you by adding console log in here. 89
So let's just cancel all the actions that are flowing through. 90
Well go ahead and do a refresh and you can see that I'm clearly getting an action of type fecche images 91
and it has a payload of strings which are the UL's for my images. 92
So again you would be sitting here saying to yourself I know the action is coming into in here but nothing 93
is happening. 94
So the problem again is that our case is not being defined properly. 95
So if you are feeling as though you're calling your action crater but nothing is happening you're not 96
getting any error messages. 97
Check your import statements. 98
Check your export statements. 99
Make sure you've got those curly braces and never be afraid as well to just console log your types so 100
I could have just as easily done a console log of fetch the images and if it came up as undefined boom 101
there is my problem right there. 102
OK I've restored everything to normal but do a refresh and we're back to being in a good state here 103
. 104
I'm going to flip over to my action crater's file. 105
Right now you can see you have got one action creator called fetch images and it always returns a list 106
of exact same images. 107
I'm going to comment this action creator out. 108
Notice how it's called the fetch images and I'm going to uncomment this alternative version of fetch 109
images. 110
So. 111
Same action creator name but it does something a little bit slightly different. 112
In this case we are using X-post to go and fetch a list of images and then we use redux thung to dispatch 113
an action only after that request has been successful. 114
So let's talk about the third type. 115
Their message just I see is all the time as well. 116
This one I don't have like a very good solution to because as you'll see by nature it's kind of it's 117
kind of hard to define hard to lock down so I'm going to inside of this function right here inside of 118
the promise. 119
So I've got request then I'm going to look at response start data right here and I'm just going to try 120
to access some property that very clearly probably does not exist. 121
So in this case I'm going to be looking for response data. 122
Hey Doc aka. 123
Etc.. 124
So I would expect to see an error message like cannot read Property A. 125
Of undefined but let's see what happens. 126
So I can refresh and sure enough I get cannot read property of undefined but that's not the part of 127
the error message I want to talk about. 128
The part I want to talk about is the first part specifically uncaught in promise type air. 129
So this is a error that I get e-mailed to me. 130
I get asked questions about this all the time. 131
What does uncaught in promise mean. 132
All the first part of this Arameans. 133
All that means is to say an error occurred inside a promise. 134
That's it that's all it says. 135
It's not making any type of assertion or give me any information about the error that occurred. 136
You know the actual error. 137
The reason the error occurred. 138
All it means to say is I was inside of a promise and something happened something bad happened. 139
So for our third most common error. 140
If you ever see uncaught in promise all only got to think to yourself is I'm going to go look at some 141
promise inside of my application. 142
Something is going wrong inside of one of my promises. 143
All right we're gone pretty rapid fire here let's talk about the last one. 144
So that last one is also very very common. 145
I'm going to modify the code here just a little bit. 146
Right now this response not data that we get back from this API endpoint that fetches a list of images 147
. 148
And by the way let me just go ahead and prove to you that this works. 149
So I to refresh and boom I get a list of images on here from some third party API. 150
Right now I get a response back from a third party API. 151
It is an array of objects where each object represents a single image and so I map through that array 152
and I pull off the thumbnail you r l property and so essentially payload is going to end up exactly 153
as it was before. 154
A list of your Elle's from which to get these images for are thumbnails. 155
So can make a little of a change here. 156
I'm going to remove the map statement and I'm going to return just response start data instead. 157
So now response data is an array of objects. 158
So instead of showing or pushing down an array of strings into my thumbnail component I am pushing down 159
an array of objects instead. 160
So let's see what happens now. 161
Will do a refresh. 162
And here we go we want to look at the second error message here. 163
Objects are not valid as a re-act child so object with keys. 164
Blah blah blah blah. 165
If you meant to render a collection of children Yadi all that kind of good stuff. 166
What this error message is saying is you tried to directly render a javascript object now reacts. 167
Used to have the ability to render entire objects and essentially they would get Jason a flight ahead 168
of time and then it would render them as a string but that behavior was deprecated in the earlier version 169
of react. 170
So no longer can you render entire objects in a reata composite component and just so we're clear here 171
when I say render an entire object do I mean to say is if inside of like you know some pede tag right 172
here. 173
I literally tried to render an object with like you know color red and I don't know backpack glue or 174
what have you. 175
So this would try to render an object and I would see the exact same error message again. 176
So that is the fourth most common error message I see just all the time when you try to incorrectly 177
render a javascript object inside of re-act component. 178
So let's go ahead change or action Krater back to working with the map to refresh and we're back to 179
normal. 180
Very good. 181
So that's it. 182
The four most common error messages that I see in react redux components are applications I see is just 183
all the time. 184
So if you were seeing these error messages you now know where to look to do a little bit of debugging 185
. 186
If you enjoyed this video I create weekly videos on re-act redux javascript. 187
Basically all things web. 188
You can check out my videos that Raley coating dot com. 189
Stop on by subscribing email list and I hope to see you again next week.