1
00:00:00,990 --> 00:00:05,370
To help illustrate why this approach right here is not going to work in the long run, I've created

2
00:00:05,370 --> 00:00:07,880
another little test package for us to try out.

3
00:00:08,340 --> 00:00:15,900
So back inside my browser, I'm going to go to unpackaged dotcom slash medium test EKG.

4
00:00:17,070 --> 00:00:23,310
So this is a package that I have also published on NPM that has two different files inside of it, we're

5
00:00:23,310 --> 00:00:29,190
currently looking at the index tax file and notice how this file requires in another file called the

6
00:00:29,190 --> 00:00:30,120
Utils File.

7
00:00:30,930 --> 00:00:36,450
In reality, to get at that file, we could make a request to the same URL, but instead of indexed,

8
00:00:36,840 --> 00:00:38,880
we would want to go to utils.

9
00:00:40,320 --> 00:00:44,490
So if I make a request to that, I see the contents of that utils file.

10
00:00:44,790 --> 00:00:47,940
So this is what we want to load up inside of our application.

11
00:00:48,090 --> 00:00:51,780
If we were trying to bundle, trying to bundle in the medium test package.

12
00:00:52,360 --> 00:00:55,170
But as you can guess, it is not going to work as expected.

13
00:00:55,980 --> 00:00:57,320
Let's go back over to our plug in.

14
00:00:58,080 --> 00:01:03,870
We're going to first get started by going down to unload and inside of our hardcoded indexed JS file,

15
00:01:04,080 --> 00:01:06,900
rather than trying to require in a tiny test package.

16
00:01:07,050 --> 00:01:10,290
I'm going to instead try to require in medium test package.

17
00:01:11,110 --> 00:01:12,030
I'll then save that.

18
00:01:12,510 --> 00:01:14,490
Go back over, refresh the app.

19
00:01:15,530 --> 00:01:20,930
And I just want you to know that this is going to result in a little bit more requests than you might

20
00:01:20,930 --> 00:01:23,920
expect, so don't sweat it too much if that happens.

21
00:01:25,750 --> 00:01:27,940
All right, I'm going to click on Submit.

22
00:01:30,220 --> 00:01:33,760
And right away, you're going to see a rather large number of requests being made.

23
00:01:34,150 --> 00:01:35,260
So what's going on here?

24
00:01:35,530 --> 00:01:38,110
Well, it doesn't really take a look at all these different logs.

25
00:01:38,120 --> 00:01:40,130
We're getting back and trying to figure out what happened.

26
00:01:40,780 --> 00:01:41,920
It's going to scroll up a little bit.

27
00:01:42,250 --> 00:01:45,810
We're going to see a lot of different kinds of logs coming from on resolve and onload.

28
00:01:46,450 --> 00:01:51,430
It looks like the first set right there of on resolving unload or for index tags to find.

29
00:01:51,760 --> 00:01:54,550
The second one is an unresolved for medium test package.

30
00:01:54,790 --> 00:02:01,170
Then unload the unload is for medium test, which is definitely good.

31
00:02:01,180 --> 00:02:02,860
We want to load up that file.

32
00:02:03,190 --> 00:02:08,440
So we are attempting to make a request to medium test package, which would give us this indexed JS

33
00:02:08,440 --> 00:02:08,800
file.

34
00:02:09,639 --> 00:02:13,210
Remember, we are going to give the contents of this file off to its build.

35
00:02:13,210 --> 00:02:18,490
Its build is then going to pass the contents of this file and attempt to find any required statements

36
00:02:18,490 --> 00:02:21,850
inside of here or any import statements in this case.

37
00:02:21,850 --> 00:02:26,770
It is going to find a require it seems to require for dot utils.

38
00:02:30,050 --> 00:02:34,790
Well, then move on to the next one on resolve, this is when its build is going to try to figure out

39
00:02:34,790 --> 00:02:41,960
a path to load up that utils file and notice very helpfully, we are told, who is attempting to import

40
00:02:41,960 --> 00:02:42,520
that file.

41
00:02:43,310 --> 00:02:45,050
That's going to become relevant in just a moment.

42
00:02:45,620 --> 00:02:51,680
But unfortunately, right now we are taking that utils and we are generating a path out of it and a

43
00:02:51,680 --> 00:02:52,780
very naive fashion.

44
00:02:52,940 --> 00:02:55,550
Once again, we're just joining it into that URL.

45
00:02:56,620 --> 00:03:06,130
So the result is that we return a path that looks like that unpackaged dotcom slash dot utils, so that

46
00:03:06,130 --> 00:03:11,890
is the file that we are attempting to load if you try to make a request to that path.

47
00:03:13,440 --> 00:03:19,710
You're going to actually load up a totally different module, a module called utils, so clearly that

48
00:03:20,160 --> 00:03:26,470
unpackaged com slash dot slash utils that just plain gives us the wrong module.

49
00:03:27,090 --> 00:03:31,170
So these URLs that we are generating in this new fashion, they're not going to work out in the long

50
00:03:31,170 --> 00:03:31,420
run.

51
00:03:31,860 --> 00:03:36,180
This is a problem that's going to come up any time that we are trying to import or require in a module

52
00:03:36,450 --> 00:03:38,250
that imports another file.

53
00:03:38,280 --> 00:03:40,320
So exactly like this case right here.

54
00:03:41,100 --> 00:03:45,630
So all this really means is that we need to come up with this strategy for generating the URL to fetch

55
00:03:45,630 --> 00:03:49,580
a path from in a much more clever fashion than what we are doing right now.

56
00:03:49,980 --> 00:03:51,810
We cannot just take our exact path.

57
00:03:52,020 --> 00:03:56,580
Instead, we need to figure out what file was trying to import this.

58
00:03:56,610 --> 00:04:00,030
So in other words, who is trying to import utils?

59
00:04:00,240 --> 00:04:03,850
And we need to resolve that URL relative to this current URL.

60
00:04:04,170 --> 00:04:08,970
So in other words, if we are at this URL and we are trying to require in slash utils, that means we

61
00:04:08,970 --> 00:04:11,280
want essentially in the same directory.

62
00:04:11,310 --> 00:04:14,280
So like utils, that is the path we want.

63
00:04:15,570 --> 00:04:17,130
That's the next big change we need to make.

64
00:04:17,610 --> 00:04:19,709
Let's figure out how to tackle this in just a moment.