1
00:00:01,040 --> 00:00:05,540
All this stuff is just a little bit crazy, so I just want to make sure it's super crystal clear what

2
00:00:05,540 --> 00:00:09,040
is going wrong inside of application right now with a little bit more complete diagram.

3
00:00:09,050 --> 00:00:12,770
So we're going to walk through what is billed is currently seeing and a different values that we are

4
00:00:12,770 --> 00:00:14,840
returning from and resolve and unload.

5
00:00:15,590 --> 00:00:17,750
Everything begins that index JS file.

6
00:00:18,110 --> 00:00:18,830
So we tell.

7
00:00:18,830 --> 00:00:20,410
Yes, build to bundle that file.

8
00:00:20,720 --> 00:00:25,190
Yes, build is going to run on resolve and onload with index tags.

9
00:00:25,580 --> 00:00:32,299
We eventually return that hardcoded contents of indexed s build parses the contents, these that we've

10
00:00:32,299 --> 00:00:35,210
got to require statement inside there for medium test package.

11
00:00:36,050 --> 00:00:40,820
So its build is going to say, oh, I need to load up this file, I need to somehow load up this package

12
00:00:40,820 --> 00:00:44,390
called medium test package to do so.

13
00:00:44,390 --> 00:00:49,670
Yes, build is going to call our on resolve function and the arguments to it are going to be an object

14
00:00:49,670 --> 00:00:53,450
like this right here, an object with a path of medium test package.

15
00:00:53,690 --> 00:00:56,870
And we are also told who is attempting to import that file as well.

16
00:00:57,680 --> 00:01:01,100
We can see the console log for that very easily back over and Cytochrome.

17
00:01:02,140 --> 00:01:03,520
So there it is right there.

18
00:01:05,760 --> 00:01:11,610
You and I do a little bit of kind of oral manipulation inside of unresolved and then eventually return

19
00:01:11,610 --> 00:01:17,400
an object that looks like this right here, something that has a path of unpackaged dotcom medium test

20
00:01:17,400 --> 00:01:17,940
package.

21
00:01:18,300 --> 00:01:23,360
And again, that's kind of our kind of naive attempt at joining some paths together right now.

22
00:01:23,370 --> 00:01:25,140
So that's this object right here.

23
00:01:27,400 --> 00:01:33,640
That object is taken, provided to unload and inside of OnLoad, we make a request with Axios to go

24
00:01:33,640 --> 00:01:38,590
and fetch that file and we absolutely, positively, successfully fetch that file.

25
00:01:38,830 --> 00:01:39,620
We definitely get it.

26
00:01:40,120 --> 00:01:43,480
We then pass that file back off to build its build.

27
00:01:43,940 --> 00:01:49,060
That file parses it and once again sees that there is a required statement in there for a file called

28
00:01:49,270 --> 00:01:50,810
Dot Utils.

29
00:01:51,430 --> 00:01:55,890
So once again, yes, it says, OK, I got to figure out a path for this and then load the file up.

30
00:01:56,770 --> 00:02:01,120
So it's going to call our unresolved function with an object that looks like this right here.

31
00:02:01,540 --> 00:02:06,730
We have a path of slash utils and we are also told who attempted to import that file.

32
00:02:07,650 --> 00:02:10,680
Again, we could very easily see that council log back inside of our council.

33
00:02:11,730 --> 00:02:13,910
There's that comes along right there.

34
00:02:16,890 --> 00:02:23,700
Then inside of unresolved, once again, we are naively joining together that URL with the path of utils,

35
00:02:24,210 --> 00:02:27,870
so presently inside of resolve, this is what we are returning.

36
00:02:27,870 --> 00:02:33,060
We are returning an object with a path of unpackaged dotcom, slashdot, utils.

37
00:02:33,540 --> 00:02:38,700
This is not what we want that's going to eventually fetch some totally different package called utils.

38
00:02:39,390 --> 00:02:44,130
What we want to do is intelligently join together these two URLs.

39
00:02:44,160 --> 00:02:46,710
We want to intelligently join together the importer.

40
00:02:47,010 --> 00:02:52,200
We want to try to find a directory or kind of a URL relative to the importer path.

41
00:02:52,830 --> 00:02:58,060
So we really want to take the importer, join on a path and kind of remove that dot flash.

42
00:02:58,080 --> 00:03:02,070
But remember the kind of tricky thing here, and the reason I'm making such a big deal about this is

43
00:03:02,070 --> 00:03:07,370
that when we have require statements that are trying to require some relative file, we can have a dot

44
00:03:07,410 --> 00:03:08,220
slash utils.

45
00:03:08,580 --> 00:03:11,670
We can also have a dot, dot slash utils.

46
00:03:12,150 --> 00:03:18,480
So we can't just really arbitrarily strip off the dot dot or strip off a dot and try to join these two

47
00:03:18,480 --> 00:03:19,080
things together.

48
00:03:19,380 --> 00:03:21,900
Instead, we need to kind of do this a little bit more intelligently.

49
00:03:22,380 --> 00:03:25,890
We eventually make sure that we generate a path like this right here.

50
00:03:26,930 --> 00:03:34,250
If we had a path of dot, dot, slash utils and we joined it together with that importer, then my expectation

51
00:03:34,250 --> 00:03:40,400
would be that we end up with just blash utils because again, we're as usual, dot, dot, slash means

52
00:03:40,400 --> 00:03:42,230
kind of up one directory, so to speak.

53
00:03:43,010 --> 00:03:48,350
So long story short, we need to make sure that we join together this importer in the path in a very

54
00:03:48,350 --> 00:03:54,050
intelligent fashion and really consider the presence of a dot or a dot dot on that path.

55
00:03:54,970 --> 00:04:00,610
Now, if we were inside of a no jobs environment, we could do this relatively easily by using the path

56
00:04:00,610 --> 00:04:05,950
module, that path standard module that is included with no jobs, but we don't really have access to

57
00:04:05,950 --> 00:04:06,910
that inside the browser.

58
00:04:07,420 --> 00:04:12,370
So we are going to use a slightly different API inside the browser to figure out how to join these two

59
00:04:12,370 --> 00:04:13,060
paths together.

60
00:04:13,480 --> 00:04:15,570
Let me show you what it is and how we're going to use it.

61
00:04:16,550 --> 00:04:24,080
Back over at my council, I'm going to write out New You RL then utils as a string.

62
00:04:25,040 --> 00:04:33,680
And then as a second argument, I'm going to put in Poland unpackaged dotcom, medium test EKG.

63
00:04:34,750 --> 00:04:40,330
This object is built directly into the browser, and we can use it to manipulate and join together different

64
00:04:40,330 --> 00:04:40,900
URLs.

65
00:04:41,830 --> 00:04:47,410
To use the URL object, we're going to put in some kind of path as the first argument and then a route

66
00:04:47,410 --> 00:04:52,960
or kind of a base domain as the second argument, when we create this URL object, we then get back

67
00:04:53,260 --> 00:04:56,950
an object that describes a lot of different parts of that URL.

68
00:04:58,370 --> 00:05:03,110
The property that we care about most right now is this H.F. property that kind of describes what happens

69
00:05:03,110 --> 00:05:08,090
when we try to join that BASTABLE domain with utils.

70
00:05:08,660 --> 00:05:12,200
You'll notice that right now that is still giving us the incorrect URL.

71
00:05:12,200 --> 00:05:13,730
We don't want slash utils.

72
00:05:13,730 --> 00:05:16,850
We want medium test package slash utils.

73
00:05:17,700 --> 00:05:21,600
So to make this work as expected, all we have to do is run that same snippet, but we're going to put

74
00:05:21,600 --> 00:05:24,180
in a forward slash at the very end right there.

75
00:05:24,720 --> 00:05:31,020
That's going to make sure that when we apply the dots, it's going to be relative to this entire path

76
00:05:31,020 --> 00:05:33,580
as opposed to replacing medium test package.

77
00:05:34,350 --> 00:05:37,170
So if I now run this with that at the very end.

78
00:05:38,410 --> 00:05:43,750
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

79
00:05:43,750 --> 00:05:44,230
URL.

80
00:05:44,260 --> 00:05:47,200
We are going to load up the utils file as expected.

81
00:05:47,690 --> 00:05:50,770
I could copy that link right away, navigate to it inside my browser.

82
00:05:51,010 --> 00:05:53,920
And sure enough, there is the correct utils js file.

83
00:05:55,420 --> 00:05:59,680
So this line of code right here, that's pretty much what we have to do, we have to take the importer.

84
00:06:00,730 --> 00:06:06,010
The importer is medium test package we have to add on the forward slash at the very end and we'll put

85
00:06:06,010 --> 00:06:08,780
on the relative URL as the first argument.

86
00:06:09,400 --> 00:06:13,480
This should also work correctly, even if we have a dot dot slash like.

87
00:06:13,480 --> 00:06:16,330
So if I tried dot dot slash utils.

88
00:06:16,690 --> 00:06:17,020
Yep.

89
00:06:17,050 --> 00:06:18,850
It looks like it still goes up on directory.

90
00:06:19,060 --> 00:06:20,460
This is the expected behavior.

91
00:06:20,470 --> 00:06:21,550
This is what we want.

92
00:06:22,000 --> 00:06:25,510
The dot dot slash means up one directory or kind of up one path.

93
00:06:25,510 --> 00:06:29,800
So remove that path joint on utils and that's what we get.

94
00:06:29,980 --> 00:06:30,910
That is definitely good.

95
00:06:31,750 --> 00:06:34,310
OK, so that's the general strategy, that's the fix we need to make.

96
00:06:34,660 --> 00:06:39,910
Let's go back into our plug in in the next video and update it and have this a little bit more intelligent

97
00:06:39,910 --> 00:06:41,380
way of generating a path.