Photo by Markus Spiske: Unsplash.
The first time I wrote a code that contains an import statement, I made literary a stupid mistake. Even though I had an experience of 8 months working with JavaScript, I spent about two nights trying to figure out why the program is not working.
I want to show you the mistake directly, but there’s no mayhem in saying more about the story to make every word I say relevant.
A lot of JavaScript developers still have that kind of perspective of let’s stay old. Why would I learn how to implement new features in JavaScript? And I used to be like these developers for a while. I ignored many times’ articles, tutorials, books talking about those new features ES6 come up with.
Each time I meet a new feature, new syntax, I try to get rid of it and implement the old one, and that just to get the same result without that burden of learning new things.
However, that didn’t last. Just after a while, I started learning ES6 features. Things have been really great, but I struggled while learning many things, including Modules. This feature doesn’t introduce a new concept in the language, it’s just using a code from another place (external or internal).
As a person who was a lazy JavaScript developer, I had no idea about modules. I used to retrieve external code or information by including the script tag or via Ajax calls.
Importing external code using modules is not something new in the language. JavaScript developers have been using modules with libraries’ aid till the community introduced them as a built-in feature in ES6.
Now let’s take an example of using an import statement or modules, to illustrate the way you can use them and why they didn’t work the first time I tried them.
First JavaScript file
The image below is for the module we want to export code from, thusly, a module is just a file that exports some code.
So we have a JavaScript file called ‘file1’ it resides inside a folder labeled ‘import’ as do you see in the picture above, our file contains a class labeled Junior it has three properties, and we have an export statement in the 10th line.
What we did right now is just exporting the module or specifically the Junior class.
Second JavaScript file:
The image below is for our file that contains the imported module.
So here we have a JavaScript file labeled ‘exfile1’, which contains the module we imported from ‘file1’ in the 8th line. We created an instance of the Junior class.
In the 9th line, we created an instance of the Senior class, which is the extended version of Junior. The remaining lines will output the “year property” for each class in the console panel.
The Html file:
The structure of our Html file :
As do you see an HTML file that contains the JavaScript ‘exfile1’ code we mentioned early, after putting these files together and opening the Html file in the browser, open the console panel.
The predictable result should be:
Our Junior friend got 1 year.
Our Senior friend got 4 years.
Unfortunately, after opening the console panel in the Chrome browser, we get an error, not what we supposed to get:
So what I did to solve this problem? I went genuinely in a rush, and I googled it, then I found the solution in Stack overflow.
It turns out that I should change the type attribute in the script tag because I’m dealing with a module, not a regular JavaScript file.
So instead of doing this :
I should be doing this:
However, that didn’t work for me too. The console panel produced another error message like this one in the picture below.
I couldn’t even identify the core of the problem in the beginning because I didn’t know what the heck is going on, why it shows me the status 404 (not found), I’m using the right file in the right place, I turned off the computer, and I went to sleep.
The next morning I woke up, I opened Vscode, and I was amazed by how stupid I am. I forgot to put the ‘js’ extension in the import statement in the 1st line of the “exfile1” file, so after fixing that minor mistake, the exfile1 file would be like this:
And the result will be the predictable result we talked about early.
Our Junior friend got 1 year.
Our Senior friend got 4 years.
Final thoughts
I didn’t write this story to taught you how to use the import statement. In case you want to learn how to use a module, you can head up to the MDN website and taught yourself how to use them wisely.
Although this mistake I made seems to be ridiculous, don’t you forget that the best way to learn is by making mistakes, plus taking notes about that mistake you made.
“If something doesn’t work out learn from it.” Unknown
In case you are using a mobile phone or To see the same article on Medium you can visit the Link below:
===> Here.
Top comments (2)
There are many settings and extensions in VSCode which can save you from such an error before it happens, such as IntelliSense and the extension Path Intellisense - which gives suggestions about files in your workspace based on your current directory
Yeah, the import systems are different between between native in browser and with bundler.