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