1
00:00:00,750 --> 00:00:04,890
Let's start to ramp up the difficulty here just a little bit and start making some changes to this plug

2
00:00:04,920 --> 00:00:09,540
in right now, we're going to add a lot of code to this plug in, but we're going to eventually extract

3
00:00:09,540 --> 00:00:11,190
it into several different plug ins.

4
00:00:11,790 --> 00:00:15,000
Let me tell you about the first change we're going to make at present.

5
00:00:15,030 --> 00:00:17,670
We've got these two hardcoded files inside this plug in.

6
00:00:18,300 --> 00:00:21,030
I want to replace or make an update to one of these files.

7
00:00:21,390 --> 00:00:24,900
I want to attempt to import a package directly from NPM.

8
00:00:25,830 --> 00:00:29,150
Let's first begin by taking a look at the package that we're going to try to import.

9
00:00:29,640 --> 00:00:38,040
So instead of a new browser tab, I'm going to navigate to unpackaged dotcom as tiny test package or

10
00:00:38,040 --> 00:00:38,700
pkg.

11
00:00:40,300 --> 00:00:45,240
If you navigate to that address, you're going to see the contents of this package are simply modeled

12
00:00:45,250 --> 00:00:45,940
on exports.

13
00:00:45,950 --> 00:00:46,500
Hi there.

14
00:00:47,010 --> 00:00:52,300
So this is a very small package I put together just so we can attempt to try to fetch a single file

15
00:00:52,300 --> 00:00:54,910
off of unpackaged package and include it into our bundle.

16
00:00:55,430 --> 00:00:59,020
So essentially, rather than having our hardcoded.

17
00:01:00,190 --> 00:01:06,370
Inside the plug in this hardcoded expert default of hi there, right there, I now want to try to match

18
00:01:06,370 --> 00:01:10,060
the contents of some other file, essentially off of Unpackaged.

19
00:01:11,190 --> 00:01:15,900
So here's the first thing we're going to do, I'm going to first begin by removing that case, we're

20
00:01:15,900 --> 00:01:19,380
not going to rely upon this hardcoded return statement right here.

21
00:01:20,910 --> 00:01:23,490
And then going to update the import statement.

22
00:01:24,530 --> 00:01:31,550
Inside of these index dogs file to say important message from tiny test package.

23
00:01:32,480 --> 00:01:35,910
So this kind of simulates what a user is going to eventually do inside of our application.

24
00:01:35,930 --> 00:01:41,300
Remember, we want them to put in something very simple, like react or react, dom or axios or whatever

25
00:01:41,300 --> 00:01:41,660
else.

26
00:01:42,140 --> 00:01:46,340
So by putting in just tiny test package, this really simulates what a user is going to eventually do

27
00:01:46,340 --> 00:01:47,330
inside of our app.

28
00:01:48,380 --> 00:01:51,620
If I now save this and go back over to my browser.

29
00:01:52,660 --> 00:01:57,610
Refresh the page and click on Submit will very quickly start to see an error message.

30
00:01:58,270 --> 00:02:02,200
Now, really quick, I want you to really take a look at this error message.

31
00:02:02,500 --> 00:02:05,090
The error says that we could not load this file.

32
00:02:05,650 --> 00:02:10,160
That means that Eskild doesn't have any idea how to load this file up.

33
00:02:10,509 --> 00:02:16,450
That means we have to implement some kind of case inside of possibly our own resolve or unload callbacks

34
00:02:16,660 --> 00:02:21,740
and help instruct us build on how it can somehow find this module that it's attempting to load.

35
00:02:22,360 --> 00:02:23,080
So that's our goal.

36
00:02:23,770 --> 00:02:29,950
Let's start to make some updates to the onload and on result functions in the next video.