It’s all about taking some rest.
The first time I wrote a code that contained an import statement, I made 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 was not working.
A lot of JavaScript developers still have an old perspective. Why would I learn how to implement new features in JavaScript? 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.
Every time I encountered a new feature or new syntax, I tried to get rid of it and implement the old one - 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 go through my example of using an import statement 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 you see in the picture above. Our file contains a class labeled Junior, which has three properties. Lastly, 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:
An HTML file that contains the JavaScript ‘exfile1’ code we mentioned earlier. 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 a 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:
<script type="text/javascript" src="exfile1.js"></script>
I should be doing this:
<script type="module" src="exfile1.js"></script>
However, that didn’t work for me either. 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 was going on. Why did it show me the status 404 (not found)? I was 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:
import Junior from './import/file1.js';
class Senior extends Junior{
constructor(){
super();
this.year='4 years';
this.fullTimeJob='yes';
}
}
const junior= new Junior();
const senior=new Senior();
console.log(`Our Junior friend got ${junior.year}`);
console.log(`Our Senior friend got ${senior.year}`);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 teach 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.
For developers who used to work with libraries through a package manager like npm, the problem above with file extension may seem weird, including a file extension is not a mandatory thing while working on a web server or while using a module bundler like Webpack.
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