It looks like everything is working as expected, but as usual, well, one or two things we need to
fix up ever so slightly.
OK, so here's the first thing I want to take a look at.
I'm going to make sure I refresh the page, just kind of make everything nice and fresh and then going
to inspect the iFrame itself.
So here's the elements panel.
Here's my iFrame and you'll notice it has that SIRC property on it inside there right now is an empty
script tag because we currently.
Are generating this female right here.
That is an empty script tag and providing it to source stock.
I'm going to add in a little bit of code, I'll put in a log of.
Hi there, or whatever else, submit it, and as soon as I do that, you'll notice that the iFrame element
updates.
We now have a source talk of a script tag, plus the contents of our bundle, which is totally expected,
totally what I would expect to see if I expand the iFrame and take a look at its contents.
So here's the document inside that iFrame.
I see inside their.
There we go inside the head, we got that script tag and there's our JavaScript code, so it's very
clear that the script is being automatically added to some head inside the iFrame.
Now, the problem here, guys want to point out is that we are currently taking the output of our bundle
right here and we are adding it as an attribute to the iFrame element right now.
This is not a really big issue because we are only bundling very small amounts of code.
But remember, at some point in time, we want to allow a user to import just about any kind of arbitrary
NPM module.
And these different modules that a user might import might be very, very large.
So we might have something like import react.
From react, I'm going to admit that so here is the source or the bundled output of react.
You'll see that we took that entire bundled output and assigned that to the SASE property, so look
how large that attribute is there.
And this is relatively a small amount of code, if a user starts to import larger modules, this attribute
is going to start to grow in size.
So here's the first problem we need to think about.
Some browsers, some modern browsers can actually restrict the length or the size of an attribute that
you assign to an HTML element.
So there might be some browsers out there that eventually say, hey, the source doc that you're trying
to assign is just too long.
It is too large and it might arbitrarily clip the length or the browser might even say or throw some
kind of warning or error message saying, hey, sorry about this attribute is just too long.
So even though this source technique definitely works, maybe we might run into some trouble at some
point in time in the future.
If we start to bundle really, really large amounts of code, that's going the first thing that we need
to think about.
The second thing that we need to think about, I'm going to change this import statement.
I'm going to change it to import react.
Dom, let's refresh first really quickly, just to show that we are working with a fresh document here.
I'm going to import react dom from react dumb like so.
So first I was importing react, everything worked as expected, now going to import react.
Instead, I'm going to submit.
And then take a look at your console.
In your console, you'll notice that we're now getting an error message, invalid or unexpected token,
and this error is coming from inside of the iFrame, so it looks like we generated our bundle correctly.
The bundle was placed into the iFrame and we tried to execute it.
But for some reason, who knows why?
With React Dom, executing this output bundle failed entirely with a syntax error, whereas everything
appeared to work correctly with those console logs we used a moment ago and it all appeared to work
correctly with react.
So what's going on here?
Well, let's take a look again at that iFrame element.
So here's the iFrame.
Once again, we've got a really long source property on there.
I'm going to expand the iFrame and then I have to scroll down underneath all this source stock stuff.
So good bit of scrolling.
Scroll, scroll, scroll.
There we go, there's the contents of the iFrame going to expand that.
There's HTML, there's the head, there's a script and now inside of here I'm going to keep scrolling.
So this is the actual script tag that contains the output of our bundle inside the iFrame going to keep
scrolling.
And eventually.
I promise it is in here.
There we go eventually towards the very bottom, you'll notice that this coat appears to be almost,
I don't know, kind of truncated it says Baudot APL and then just dot, dot, dot.
So does that mean that the browser is kind of just arbitrarily not printing out the entire script here?
I don't know.
Let's try double clicking this.
It allows us to select that code.
I'm going to copy all the code inside that script tag, and I'm going to take it over my browser and
just paste it into a new window so we can better examine what's going on.
Well, now that I look at this, it really does appear that this entire script tag is being truncated
early, like part of the second half of react.
Dom is just entirely cut off.
So what's going on here?
Well, let's take another look at our browser.
It's going to.
Close the script tag inside the iFrame aisle, then find the body.
I'm going to open that up and take a look at that.
It is the rest of the code or react, Dom.
So it looks like react Dom has for some reason been split into two here, some amount of code from React
Dom has been correctly placed inside the script tag.
The other half of the code, for some reason, has been placed into the body element as plain text instead.
And as a matter of fact, if I scroll down inside of our main window past that element that has the
output bundle.
We really have to go all the way down to the bottom, here's the iFrame and there is once again like
half of all the source code for react.
So, again, what is going on here?
Well, it's all in the day.
Kind of a simple thing.
I'm going to go back over to the council where we still have that syntax error.
I'm going to click on this link right here.
And then take a look at the code.
Of wear it through the air.
So this is the air right here, this is what is giving some trouble to the execution of react.
It turns out that inside of reactor at some point in time, a string is defined in that string, has
the text script as a tag.
So why would that cause causes trouble?
Well, think back.
Into how we are currently creating our script element back here, we are creating a script tag, we
stick all of our code inside there and we have a closing tag.
All the code that is being placed inside of here is being placed in essentially as one big string.
So inside of all that react script or all that react on code, there's eventually.
Some kind of script element to find inside the source code of reactant itself, so we can almost imagine
that inside of -- there's eventually going to be something printed out that looks like this.
Your browser, as it is parsing this script tag as it's parsing all the JavaScript code we place inside
of here is going to eventually try to find a closing script tag.
And so it's finding a closing script tag inside of the source code of react arm inside of a string.
Your browser sees that close closing script tag and it says, oh, this must be the end of the script.
So this script tag Inside of wisdom is unfortunately splitting our entire source code, the bundle into
two separate parts.
That's what's going on.
I know that's kind of a very long explanation, but that is what is happening right now.
So very unfortunate and means that well beyond just react, Dom, maybe we could figure out some way
of fixing this up.
But if there's ever any other code inside of our application, if there's ever anything else inside
the JavaScript they were trying to process, that might cause the browser to get a little bit confused.
Well, once again, we're probably gonna run into an error really quickly as the browser unfortunately
interprets this as like a closing script tag or maybe some kind of other closing HTML element.
As a matter of fact, I bet you anything.
I don't actually know if this is going to work, but we'll just give it a quick shot and refresh the
page.
I want to try bundling just a string into a console log of, well, let's prove what's going wrong.
First, I'm going to do something like this.
I'm going to submit that and OK, that's a more clear example of what's going on here.
So that closing script tag is just throwing everything off.
If we tried to put in the start putting like an H1, maybe.
Is that going to.
Throw everything off as well.
I think that, yeah, that's going to handle just well, it's really when your browser is passing all
that JavaScript and trying to find that closing script tag.
So pretty clearly not quite working as expected.
OK, so that's it, two big problems we have to solve whenever we have a script tag inside of our source
code, something very not good occurs.
And in addition, if we ever try to start bundling really big files, we might eventually start to run
into some trouble because we are trying to assign all this stuff to the iFrame through the source attributes.
So we have to figure out what's going on here, got to figure out some way to solve both these problems.
Fortunately, it turns out that we can actually use the same solution to solve both these problems at
the same time.
So kind of fortunate for us.
Let's take a look at how we're going to deal with the stuff in the next video.