This bundle variable is showing up inside of our code cell component as undefined sometimes that's what
we're seeing at our console.
So as we were discussing at the end of the last video, we might want to apply a better, tight definition
somewhere just to help TypeScript tell us that, hey, bundle might be undefined.
The reason that this is so important is that if we go down to our preview component right now, uncommented
and then try to make use of that bundle variable, so let's say let's pass in the code and air from
bundle, it would be something like bundle code and bundle air.
Right now, as far as TypeScript is concerned, bundle will always be defined.
But you and I know based on that console log that we just saw, that this is not the case.
So although TypeScript says there's no problem here if we save this and then go back over to the browser
and refresh, we're going to very quickly see an error.
And the error message says that we are trying to read property code of undefined.
So, again, this is a location where we would normally expect TypeScript to jump in and say that bundle
thing, it might not be defined.
So to fix this up, we're going to go back over to our reducer, our bundles reducer inside the reducers
directory.
We're going to find our Bundall state interface right here and we're going to make a very small change
to it, although this interface might eventually hold up for our state object.
Right now it doesn't.
There are periods of time where we can look up a cell ID inside of your and knock it back an object
that looks like this.
Instead, we get back undefined.
So we're going to update this type definition to express that I'm going to put in whenever we look up
a key, we're going to get back an object that looks like that or undefined.
So this is going to account for when our application is first booting up and we do not yet have a bundle
for some particular cell.
It's going to save this all, then go back over to our Kozel and now down at our preview component,
now we can very easily see that there is an error message says here that we can't look up code on the
bundle variable because that might be undefined.
That is exactly the error message I would expect to see.
So now to fix this up, we can say, well, you know what, let's just not show the preview component
at all until we actually have a bundle.
So I'm going to wrap preview with some curly braces and then put in a bundle and like so.
Now, this will definitely fix the air, but I just want to mention really quickly as well, this is
not going to or it's currently not making use of that loading flag, which we added in.
So there's really two cases now in which we will want to show that loading spinner.
The first one is if we don't have a bundle.
The second is if this bundle thing has a loading flag of true.
So just keep it in mind, because as we start to go and implement that Spiner something to say, hey,
we're currently processing your bundle, we're creating one for you.
We're going to have to consider those two different cases.
All right.
Now back up towards the top, I just want a very quickly clean up that console log right there.
Let's say this go back over to a quick refresh.
And now no more air, let's actually test out the entire bundling process, so I'm going to put inside
of this first code editor about a console log of one, two, three, if I then paused for a very brief
period of time.
So about seven hundred fifty milliseconds, you might say, we eventually see that console log.
That is very good.
That means we are successfully bundling our code inside that action creator updating our bundles, piece
of states and then getting the completed bundle back inside of our code cell component and passing it
down to preview.
This is very good.
Let's do another quick test here, remember inside of our preview frame right there.
There is an element that has an ID of root.
Let's try to access that thing and add in some content inside of it.
So I'll do a document.
Where he selecter and Drut.
TML.
Equals whatever.
So once again, this means that we were correctly generating the bundle, getting it down into prevue
and then executing that bundled code inside there.
I'm going to make sure that also works for our other code sell down here as well.
I'm going to go and piece that Sinco down will change in the text.
Yep, looks good.
And then finally, one more quick test at the very top are going to add in another Kozel.
Is something inside there, you update that text as well.
Very good.
All right, well, this is fantastic.
It means we have moved our entire bundling process over to the dark side of our application.
However, as usual, still one or two things to take care of in this case, we got a couple of warnings
here.
I just want to handle these warnings really quickly.
To the warnings for these two right here are absolutely benign, we'll fix this up very quickly, but
the other one is going to be a little bit more of an issue.
So let's take a pause right here and then come back in just a moment.