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. 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. Why would I learn how to implement new features in JavaScript? 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 ‘ ’. It resides inside a folder labeled ‘ ’, as you see in the picture above. Our file contains a which has three properties. Lastly, we have an export statement in the 10th line. file1 import class labeled Junior, 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 ’, which contains the module we imported from ‘ ’ in the 8th line. We created an instance of the class. ‘ exfile1 file1 Junior In the 9th line, we created an instance of the class, which is the extended version of Junior. The remaining lines will output the “ ” for each class in the console panel. Senior year property 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= src= > "text/javascript" "exfile1.js" </ > script I should be doing this: <script type= src= > "module" "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. ... I turned off the computer and I went to sleep. Why did it show me the status 404 (not found)? I was using the right file in the right place The next morning I woke up, I opened Vscode, and I was amazed by how stupid I am. I forgot to put the ‘ ’ extension in the import statement in the 1st line of the file, so after fixing that minor mistake, the file would be like this: js “ exfile1 ” exfile1 Junior ; { (){ (); .year= ; .fullTimeJob= ;
}
} junior= Junior(); senior= Senior(); .log( ); .log( ); import from './import/file1.js' class Senior extends Junior constructor super this '4 years' this 'yes' const new const new console `Our Junior friend got ` ${junior.year} console `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. - Unknown “If something doesn’t work out learn from it.” Read behind a paywall at https://medium.com/javascript-in-plain-english/the-stupid-mistake-i-made-with-the-javascript-import-statement-75c4d111d70b

Super

Beginner in Front-End? Don't Learn React, Angular or Vue 

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

How I Fixed My Stupid JavaScript Mistake

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Beginner in Front-End? Don't Learn React, Angular or Vue

11 Useful Tips for Learning Programming

3 Efficient Ways to Reverse a List in Python

5 Things I Wish I Knew When Learning to Code

A Video Game, a Fighter Plane, and a Story to Explain Technical Debt – Even to Non-Technical People

Beginner in Front-End? Don't Learn React, Angular or Vue

11 Useful Tips for Learning Programming

3 Efficient Ways to Reverse a List in Python

5 Things I Wish I Knew When Learning to Code

A Video Game, a Fighter Plane, and a Story to Explain Technical Debt – Even to Non-Technical People

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps