So now let's fix this or let's work on that.
We have our server,
we change this app.js file to be of type module,
so now let's make sure we use this exported component and we use it by importing it somewhere. Exporting
it is one part but that still does not make it globally available,
it just means that we can now import the exported thing and you can not just export classes by the
way,
you can also export functions, variables, constants and so on so that you can use the exported thing
in another file, here the tooltip.js file is that other file and to import something exported, we
indeed use the import command.
So we start with import and we also need to tell Javascript from where,
so we add the from keyword and then as a string, semicolon thereafter, a path, a relative path to that
file. A relative path starts with a dot and then dot slash means you want to look in the same folder,
dot dot means you want to go up one folder which we could use to then navigate into utility or just
a slash could also be used to have an absolute path from your root on
but that's a bit more typical to resolve in our heads at least,
so therefore you typically work with relative paths
and here I want to import from component.
Now you see I still got an error here,
the problem is I am exporting something in component, in that component.js file but you can export
more than one thing in your files,
here I have only one thing but that's not a technical limitation.
So we have to tell Javascript what we want to import from that file and for that, we go to that place
where we import it from and here, you add curly braces,
now the error is gone at least. Now between the curly braces, you write the name, the exact name of what
you want to import
and typically you should get autocompletion here, if you hit control space,
it should suggest you this component in my case, this component class. So if I hit enter, this is added
here,
of course you could have also just written this manually
and now we're importing component into this file.
Now this is good but what's not so good is that our application will still not work if I reload. The reason
for that is that we still load the tooltip file with such a traditional import.
We need to add type module there, to make sure that it can utilize module features which is the export
keyword but also the import keyword. If we do so and we reload,
this error is gone but we get an error that component is not found. The reason for that is that in this path
here,
you need to add the extension at all times
and regarding the extension,
some people like to name the files which are only imported mjs at the end,
this is totally optional though, you can go with .js, .mjs, the M would stand for module
but technically here, it makes no difference so I'll stick to js. The extension is important to be specified
though, whatever it is.
So now if I reload, this works and our application works again but now we're using modules to express
this relation between tooltip and component and this improves our application because now, it's also
super easy to see which dependencies we have in this file and in addition to that, we also don't have
to worry about correctly ordering the imports here because the import is right in our Javascript file.