1 00:00:00,820 --> 00:00:05,830 It looks like everything is working as expected, but as usual, well, one or two things we need to 2 00:00:05,830 --> 00:00:07,120 fix up ever so slightly. 3 00:00:07,630 --> 00:00:09,620 OK, so here's the first thing I want to take a look at. 4 00:00:10,180 --> 00:00:14,590 I'm going to make sure I refresh the page, just kind of make everything nice and fresh and then going 5 00:00:14,590 --> 00:00:16,650 to inspect the iFrame itself. 6 00:00:17,610 --> 00:00:18,810 So here's the elements panel. 7 00:00:19,870 --> 00:00:26,260 Here's my iFrame and you'll notice it has that SIRC property on it inside there right now is an empty 8 00:00:26,260 --> 00:00:28,540 script tag because we currently. 9 00:00:29,490 --> 00:00:31,350 Are generating this female right here. 10 00:00:31,500 --> 00:00:34,950 That is an empty script tag and providing it to source stock. 11 00:00:36,830 --> 00:00:40,670 I'm going to add in a little bit of code, I'll put in a log of. 12 00:00:41,620 --> 00:00:46,890 Hi there, or whatever else, submit it, and as soon as I do that, you'll notice that the iFrame element 13 00:00:46,900 --> 00:00:47,410 updates. 14 00:00:47,560 --> 00:00:53,350 We now have a source talk of a script tag, plus the contents of our bundle, which is totally expected, 15 00:00:53,350 --> 00:00:58,290 totally what I would expect to see if I expand the iFrame and take a look at its contents. 16 00:00:58,900 --> 00:01:00,880 So here's the document inside that iFrame. 17 00:01:02,170 --> 00:01:04,450 I see inside their. 18 00:01:06,340 --> 00:01:12,070 There we go inside the head, we got that script tag and there's our JavaScript code, so it's very 19 00:01:12,070 --> 00:01:15,880 clear that the script is being automatically added to some head inside the iFrame. 20 00:01:16,570 --> 00:01:21,850 Now, the problem here, guys want to point out is that we are currently taking the output of our bundle 21 00:01:22,090 --> 00:01:27,090 right here and we are adding it as an attribute to the iFrame element right now. 22 00:01:27,100 --> 00:01:31,030 This is not a really big issue because we are only bundling very small amounts of code. 23 00:01:31,560 --> 00:01:37,030 But remember, at some point in time, we want to allow a user to import just about any kind of arbitrary 24 00:01:37,030 --> 00:01:37,870 NPM module. 25 00:01:38,200 --> 00:01:43,020 And these different modules that a user might import might be very, very large. 26 00:01:43,750 --> 00:01:45,820 So we might have something like import react. 27 00:01:47,820 --> 00:01:54,000 From react, I'm going to admit that so here is the source or the bundled output of react. 28 00:01:54,940 --> 00:02:00,460 You'll see that we took that entire bundled output and assigned that to the SASE property, so look 29 00:02:00,460 --> 00:02:01,990 how large that attribute is there. 30 00:02:03,010 --> 00:02:09,100 And this is relatively a small amount of code, if a user starts to import larger modules, this attribute 31 00:02:09,100 --> 00:02:10,460 is going to start to grow in size. 32 00:02:10,990 --> 00:02:13,600 So here's the first problem we need to think about. 33 00:02:14,050 --> 00:02:21,040 Some browsers, some modern browsers can actually restrict the length or the size of an attribute that 34 00:02:21,040 --> 00:02:22,800 you assign to an HTML element. 35 00:02:23,350 --> 00:02:27,670 So there might be some browsers out there that eventually say, hey, the source doc that you're trying 36 00:02:27,670 --> 00:02:29,470 to assign is just too long. 37 00:02:29,470 --> 00:02:34,690 It is too large and it might arbitrarily clip the length or the browser might even say or throw some 38 00:02:34,690 --> 00:02:38,960 kind of warning or error message saying, hey, sorry about this attribute is just too long. 39 00:02:39,760 --> 00:02:46,870 So even though this source technique definitely works, maybe we might run into some trouble at some 40 00:02:46,870 --> 00:02:48,160 point in time in the future. 41 00:02:48,460 --> 00:02:53,170 If we start to bundle really, really large amounts of code, that's going the first thing that we need 42 00:02:53,170 --> 00:02:53,800 to think about. 43 00:02:54,220 --> 00:02:58,090 The second thing that we need to think about, I'm going to change this import statement. 44 00:02:58,690 --> 00:03:00,190 I'm going to change it to import react. 45 00:03:00,190 --> 00:03:06,520 Dom, let's refresh first really quickly, just to show that we are working with a fresh document here. 46 00:03:07,940 --> 00:03:13,490 I'm going to import react dom from react dumb like so. 47 00:03:14,320 --> 00:03:18,510 So first I was importing react, everything worked as expected, now going to import react. 48 00:03:18,650 --> 00:03:20,290 Instead, I'm going to submit. 49 00:03:21,390 --> 00:03:23,130 And then take a look at your console. 50 00:03:24,100 --> 00:03:28,330 In your console, you'll notice that we're now getting an error message, invalid or unexpected token, 51 00:03:28,630 --> 00:03:34,210 and this error is coming from inside of the iFrame, so it looks like we generated our bundle correctly. 52 00:03:34,540 --> 00:03:37,630 The bundle was placed into the iFrame and we tried to execute it. 53 00:03:37,780 --> 00:03:40,300 But for some reason, who knows why? 54 00:03:40,300 --> 00:03:46,900 With React Dom, executing this output bundle failed entirely with a syntax error, whereas everything 55 00:03:46,900 --> 00:03:51,370 appeared to work correctly with those console logs we used a moment ago and it all appeared to work 56 00:03:51,370 --> 00:03:52,300 correctly with react. 57 00:03:52,690 --> 00:03:54,010 So what's going on here? 58 00:03:54,370 --> 00:03:56,670 Well, let's take a look again at that iFrame element. 59 00:03:57,460 --> 00:03:58,300 So here's the iFrame. 60 00:03:58,510 --> 00:04:01,510 Once again, we've got a really long source property on there. 61 00:04:02,200 --> 00:04:07,380 I'm going to expand the iFrame and then I have to scroll down underneath all this source stock stuff. 62 00:04:07,390 --> 00:04:08,620 So good bit of scrolling. 63 00:04:09,590 --> 00:04:10,640 Scroll, scroll, scroll. 64 00:04:13,880 --> 00:04:14,870 Scroll, scroll, scroll. 65 00:04:15,560 --> 00:04:18,950 There we go, there's the contents of the iFrame going to expand that. 66 00:04:19,279 --> 00:04:25,940 There's HTML, there's the head, there's a script and now inside of here I'm going to keep scrolling. 67 00:04:26,060 --> 00:04:30,890 So this is the actual script tag that contains the output of our bundle inside the iFrame going to keep 68 00:04:30,890 --> 00:04:31,400 scrolling. 69 00:04:35,090 --> 00:04:36,320 And eventually. 70 00:04:39,910 --> 00:04:41,860 I promise it is in here. 71 00:04:42,760 --> 00:04:48,520 There we go eventually towards the very bottom, you'll notice that this coat appears to be almost, 72 00:04:48,520 --> 00:04:54,460 I don't know, kind of truncated it says Baudot APL and then just dot, dot, dot. 73 00:04:54,880 --> 00:04:59,150 So does that mean that the browser is kind of just arbitrarily not printing out the entire script here? 74 00:04:59,470 --> 00:04:59,820 I don't know. 75 00:04:59,830 --> 00:05:01,330 Let's try double clicking this. 76 00:05:01,630 --> 00:05:03,160 It allows us to select that code. 77 00:05:03,680 --> 00:05:08,710 I'm going to copy all the code inside that script tag, and I'm going to take it over my browser and 78 00:05:08,710 --> 00:05:11,440 just paste it into a new window so we can better examine what's going on. 79 00:05:12,190 --> 00:05:17,770 Well, now that I look at this, it really does appear that this entire script tag is being truncated 80 00:05:17,770 --> 00:05:20,660 early, like part of the second half of react. 81 00:05:20,660 --> 00:05:22,560 Dom is just entirely cut off. 82 00:05:23,140 --> 00:05:24,520 So what's going on here? 83 00:05:25,000 --> 00:05:26,620 Well, let's take another look at our browser. 84 00:05:27,370 --> 00:05:28,150 It's going to. 85 00:05:29,160 --> 00:05:32,850 Close the script tag inside the iFrame aisle, then find the body. 86 00:05:33,120 --> 00:05:35,620 I'm going to open that up and take a look at that. 87 00:05:35,640 --> 00:05:39,120 It is the rest of the code or react, Dom. 88 00:05:40,120 --> 00:05:46,070 So it looks like react Dom has for some reason been split into two here, some amount of code from React 89 00:05:46,070 --> 00:05:48,430 Dom has been correctly placed inside the script tag. 90 00:05:48,760 --> 00:05:54,730 The other half of the code, for some reason, has been placed into the body element as plain text instead. 91 00:05:55,270 --> 00:06:00,580 And as a matter of fact, if I scroll down inside of our main window past that element that has the 92 00:06:00,580 --> 00:06:01,210 output bundle. 93 00:06:02,410 --> 00:06:07,930 We really have to go all the way down to the bottom, here's the iFrame and there is once again like 94 00:06:07,930 --> 00:06:09,680 half of all the source code for react. 95 00:06:10,630 --> 00:06:13,450 So, again, what is going on here? 96 00:06:13,840 --> 00:06:16,030 Well, it's all in the day. 97 00:06:16,030 --> 00:06:16,870 Kind of a simple thing. 98 00:06:17,350 --> 00:06:20,230 I'm going to go back over to the council where we still have that syntax error. 99 00:06:20,420 --> 00:06:21,820 I'm going to click on this link right here. 100 00:06:23,470 --> 00:06:24,820 And then take a look at the code. 101 00:06:25,900 --> 00:06:27,390 Of wear it through the air. 102 00:06:28,840 --> 00:06:33,400 So this is the air right here, this is what is giving some trouble to the execution of react. 103 00:06:33,910 --> 00:06:39,640 It turns out that inside of reactor at some point in time, a string is defined in that string, has 104 00:06:39,640 --> 00:06:42,280 the text script as a tag. 105 00:06:43,300 --> 00:06:44,770 So why would that cause causes trouble? 106 00:06:45,070 --> 00:06:45,850 Well, think back. 107 00:06:46,880 --> 00:06:53,030 Into how we are currently creating our script element back here, we are creating a script tag, we 108 00:06:53,030 --> 00:06:55,550 stick all of our code inside there and we have a closing tag. 109 00:06:55,910 --> 00:07:01,090 All the code that is being placed inside of here is being placed in essentially as one big string. 110 00:07:01,490 --> 00:07:06,680 So inside of all that react script or all that react on code, there's eventually. 111 00:07:07,930 --> 00:07:13,810 Some kind of script element to find inside the source code of reactant itself, so we can almost imagine 112 00:07:13,810 --> 00:07:18,040 that inside of -- there's eventually going to be something printed out that looks like this. 113 00:07:18,910 --> 00:07:24,640 Your browser, as it is parsing this script tag as it's parsing all the JavaScript code we place inside 114 00:07:24,640 --> 00:07:27,900 of here is going to eventually try to find a closing script tag. 115 00:07:28,240 --> 00:07:34,960 And so it's finding a closing script tag inside of the source code of react arm inside of a string. 116 00:07:35,560 --> 00:07:40,920 Your browser sees that close closing script tag and it says, oh, this must be the end of the script. 117 00:07:41,530 --> 00:07:49,090 So this script tag Inside of wisdom is unfortunately splitting our entire source code, the bundle into 118 00:07:49,090 --> 00:07:50,410 two separate parts. 119 00:07:50,860 --> 00:07:51,900 That's what's going on. 120 00:07:51,910 --> 00:07:55,530 I know that's kind of a very long explanation, but that is what is happening right now. 121 00:07:56,230 --> 00:08:01,840 So very unfortunate and means that well beyond just react, Dom, maybe we could figure out some way 122 00:08:01,840 --> 00:08:02,680 of fixing this up. 123 00:08:02,830 --> 00:08:08,500 But if there's ever any other code inside of our application, if there's ever anything else inside 124 00:08:08,500 --> 00:08:12,830 the JavaScript they were trying to process, that might cause the browser to get a little bit confused. 125 00:08:13,090 --> 00:08:18,100 Well, once again, we're probably gonna run into an error really quickly as the browser unfortunately 126 00:08:18,250 --> 00:08:23,370 interprets this as like a closing script tag or maybe some kind of other closing HTML element. 127 00:08:23,980 --> 00:08:26,310 As a matter of fact, I bet you anything. 128 00:08:26,710 --> 00:08:30,190 I don't actually know if this is going to work, but we'll just give it a quick shot and refresh the 129 00:08:30,190 --> 00:08:30,670 page. 130 00:08:32,559 --> 00:08:40,230 I want to try bundling just a string into a console log of, well, let's prove what's going wrong. 131 00:08:40,240 --> 00:08:42,700 First, I'm going to do something like this. 132 00:08:44,590 --> 00:08:48,510 I'm going to submit that and OK, that's a more clear example of what's going on here. 133 00:08:48,820 --> 00:08:51,310 So that closing script tag is just throwing everything off. 134 00:08:52,210 --> 00:08:55,060 If we tried to put in the start putting like an H1, maybe. 135 00:08:56,320 --> 00:08:57,070 Is that going to. 136 00:08:58,040 --> 00:08:59,090 Throw everything off as well. 137 00:09:00,070 --> 00:09:03,860 I think that, yeah, that's going to handle just well, it's really when your browser is passing all 138 00:09:03,860 --> 00:09:05,900 that JavaScript and trying to find that closing script tag. 139 00:09:06,590 --> 00:09:09,560 So pretty clearly not quite working as expected. 140 00:09:10,530 --> 00:09:15,630 OK, so that's it, two big problems we have to solve whenever we have a script tag inside of our source 141 00:09:15,630 --> 00:09:18,180 code, something very not good occurs. 142 00:09:18,510 --> 00:09:23,910 And in addition, if we ever try to start bundling really big files, we might eventually start to run 143 00:09:23,910 --> 00:09:29,400 into some trouble because we are trying to assign all this stuff to the iFrame through the source attributes. 144 00:09:29,910 --> 00:09:34,050 So we have to figure out what's going on here, got to figure out some way to solve both these problems. 145 00:09:34,500 --> 00:09:38,190 Fortunately, it turns out that we can actually use the same solution to solve both these problems at 146 00:09:38,190 --> 00:09:38,760 the same time. 147 00:09:39,120 --> 00:09:40,730 So kind of fortunate for us. 148 00:09:41,340 --> 00:09:44,250 Let's take a look at how we're going to deal with the stuff in the next video.