All this stuff is just a little bit crazy, so I just want to make sure it's super crystal clear what
is going wrong inside of application right now with a little bit more complete diagram.
So we're going to walk through what is billed is currently seeing and a different values that we are
returning from and resolve and unload.
Everything begins that index JS file.
So we tell.
Yes, build to bundle that file.
Yes, build is going to run on resolve and onload with index tags.
We eventually return that hardcoded contents of indexed s build parses the contents, these that we've
got to require statement inside there for medium test package.
So its build is going to say, oh, I need to load up this file, I need to somehow load up this package
called medium test package to do so.
Yes, build is going to call our on resolve function and the arguments to it are going to be an object
like this right here, an object with a path of medium test package.
And we are also told who is attempting to import that file as well.
We can see the console log for that very easily back over and Cytochrome.
So there it is right there.
You and I do a little bit of kind of oral manipulation inside of unresolved and then eventually return
an object that looks like this right here, something that has a path of unpackaged dotcom medium test
package.
And again, that's kind of our kind of naive attempt at joining some paths together right now.
So that's this object right here.
That object is taken, provided to unload and inside of OnLoad, we make a request with Axios to go
and fetch that file and we absolutely, positively, successfully fetch that file.
We definitely get it.
We then pass that file back off to build its build.
That file parses it and once again sees that there is a required statement in there for a file called
Dot Utils.
So once again, yes, it says, OK, I got to figure out a path for this and then load the file up.
So it's going to call our unresolved function with an object that looks like this right here.
We have a path of slash utils and we are also told who attempted to import that file.
Again, we could very easily see that council log back inside of our council.
There's that comes along right there.
Then inside of unresolved, once again, we are naively joining together that URL with the path of utils,
so presently inside of resolve, this is what we are returning.
We are returning an object with a path of unpackaged dotcom, slashdot, utils.
This is not what we want that's going to eventually fetch some totally different package called utils.
What we want to do is intelligently join together these two URLs.
We want to intelligently join together the importer.
We want to try to find a directory or kind of a URL relative to the importer path.
So we really want to take the importer, join on a path and kind of remove that dot flash.
But remember the kind of tricky thing here, and the reason I'm making such a big deal about this is
that when we have require statements that are trying to require some relative file, we can have a dot
slash utils.
We can also have a dot, dot slash utils.
So we can't just really arbitrarily strip off the dot dot or strip off a dot and try to join these two
things together.
Instead, we need to kind of do this a little bit more intelligently.
We eventually make sure that we generate a path like this right here.
If we had a path of dot, dot, slash utils and we joined it together with that importer, then my expectation
would be that we end up with just blash utils because again, we're as usual, dot, dot, slash means
kind of up one directory, so to speak.
So long story short, we need to make sure that we join together this importer in the path in a very
intelligent fashion and really consider the presence of a dot or a dot dot on that path.
Now, if we were inside of a no jobs environment, we could do this relatively easily by using the path
module, that path standard module that is included with no jobs, but we don't really have access to
that inside the browser.
So we are going to use a slightly different API inside the browser to figure out how to join these two
paths together.
Let me show you what it is and how we're going to use it.
Back over at my council, I'm going to write out New You RL then utils as a string.
And then as a second argument, I'm going to put in Poland unpackaged dotcom, medium test EKG.
This object is built directly into the browser, and we can use it to manipulate and join together different
URLs.
To use the URL object, we're going to put in some kind of path as the first argument and then a route
or kind of a base domain as the second argument, when we create this URL object, we then get back
an object that describes a lot of different parts of that URL.
The property that we care about most right now is this H.F. property that kind of describes what happens
when we try to join that BASTABLE domain with utils.
You'll notice that right now that is still giving us the incorrect URL.
We don't want slash utils.
We want medium test package slash utils.
So to make this work as expected, all we have to do is run that same snippet, but we're going to put
in a forward slash at the very end right there.
That's going to make sure that when we apply the dots, it's going to be relative to this entire path
as opposed to replacing medium test package.
So if I now run this with that at the very end.
And take a look at H.F. Now you'll see that we do, in fact, generate the correct URL if we go to that
URL.
We are going to load up the utils file as expected.
I could copy that link right away, navigate to it inside my browser.
And sure enough, there is the correct utils js file.
So this line of code right here, that's pretty much what we have to do, we have to take the importer.
The importer is medium test package we have to add on the forward slash at the very end and we'll put
on the relative URL as the first argument.
This should also work correctly, even if we have a dot dot slash like.
So if I tried dot dot slash utils.
Yep.
It looks like it still goes up on directory.
This is the expected behavior.
This is what we want.
The dot dot slash means up one directory or kind of up one path.
So remove that path joint on utils and that's what we get.
That is definitely good.
OK, so that's the general strategy, that's the fix we need to make.
Let's go back into our plug in in the next video and update it and have this a little bit more intelligent
way of generating a path.