1
00:00:02,450 --> 00:00:05,400
So now let's fix this or let's work on that.

2
00:00:05,420 --> 00:00:06,390
We have our server,

3
00:00:06,410 --> 00:00:10,550
we change this app.js file to be of type module,

4
00:00:10,580 --> 00:00:18,110
so now let's make sure we use this exported component and we use it by importing it somewhere. Exporting

5
00:00:18,110 --> 00:00:21,760
it is one part but that still does not make it globally available,

6
00:00:21,770 --> 00:00:27,860
it just means that we can now import the exported thing and you can not just export classes by the

7
00:00:27,860 --> 00:00:28,240
way,

8
00:00:28,280 --> 00:00:34,310
you can also export functions, variables, constants and so on so that you can use the exported thing

9
00:00:34,520 --> 00:00:40,910
in another file, here the tooltip.js file is that other file and to import something exported, we

10
00:00:41,570 --> 00:00:43,640
indeed use the import command.

11
00:00:43,640 --> 00:00:48,550
So we start with import and we also need to tell Javascript from where,

12
00:00:48,560 --> 00:00:56,060
so we add the from keyword and then as a string, semicolon thereafter, a path, a relative path to that

13
00:00:56,060 --> 00:01:02,930
file. A relative path starts with a dot and then dot slash means you want to look in the same folder,

14
00:01:02,960 --> 00:01:08,810
dot dot means you want to go up one folder which we could use to then navigate into utility or just

15
00:01:08,810 --> 00:01:13,700
a slash could also be used to have an absolute path from your root on

16
00:01:13,700 --> 00:01:17,520
but that's a bit more typical to resolve in our heads at least,

17
00:01:17,540 --> 00:01:20,550
so therefore you typically work with relative paths

18
00:01:20,780 --> 00:01:23,760
and here I want to import from component.

19
00:01:23,900 --> 00:01:25,670
Now you see I still got an error here,

20
00:01:25,700 --> 00:01:31,700
the problem is I am exporting something in component, in that component.js file but you can export

21
00:01:31,760 --> 00:01:34,360
more than one thing in your files,

22
00:01:34,370 --> 00:01:38,840
here I have only one thing but that's not a technical limitation.

23
00:01:38,840 --> 00:01:44,000
So we have to tell Javascript what we want to import from that file and for that, we go to that place

24
00:01:44,030 --> 00:01:48,410
where we import it from and here, you add curly braces,

25
00:01:48,410 --> 00:01:55,310
now the error is gone at least. Now between the curly braces, you write the name, the exact name of what

26
00:01:55,310 --> 00:01:56,290
you want to import

27
00:01:56,390 --> 00:02:00,380
and typically you should get autocompletion here, if you hit control space,

28
00:02:00,620 --> 00:02:06,970
it should suggest you this component in my case, this component class. So if I hit enter, this is added

29
00:02:06,970 --> 00:02:07,550
here,

30
00:02:07,550 --> 00:02:09,900
of course you could have also just written this manually

31
00:02:10,070 --> 00:02:15,450
and now we're importing component into this file.

32
00:02:15,520 --> 00:02:22,210
Now this is good but what's not so good is that our application will still not work if I reload. The reason

33
00:02:22,210 --> 00:02:27,810
for that is that we still load the tooltip file with such a traditional import.

34
00:02:28,150 --> 00:02:36,100
We need to add type module there, to make sure that it can utilize module features which is the export

35
00:02:36,100 --> 00:02:40,270
keyword but also the import keyword. If we do so and we reload,

36
00:02:40,360 --> 00:02:47,320
this error is gone but we get an error that component is not found. The reason for that is that in this path

37
00:02:47,320 --> 00:02:48,190
here,

38
00:02:48,520 --> 00:02:51,040
you need to add the extension at all times

39
00:02:51,100 --> 00:02:52,430
and regarding the extension,

40
00:02:52,450 --> 00:02:57,950
some people like to name the files which are only imported mjs at the end,

41
00:02:57,970 --> 00:03:03,580
this is totally optional though, you can go with .js, .mjs, the M would stand for module

42
00:03:03,790 --> 00:03:10,060
but technically here, it makes no difference so I'll stick to js. The extension is important to be specified

43
00:03:10,090 --> 00:03:11,870
though, whatever it is.

44
00:03:11,950 --> 00:03:18,830
So now if I reload, this works and our application works again but now we're using modules to express

45
00:03:18,830 --> 00:03:26,190
this relation between tooltip and component and this improves our application because now, it's also

46
00:03:26,260 --> 00:03:32,830
super easy to see which dependencies we have in this file and in addition to that, we also don't have

47
00:03:32,830 --> 00:03:38,800
to worry about correctly ordering the imports here because the import is right in our Javascript file.