Fix Syntaxerror: Cannot use import statement outside a module

In this article, we will see why the SyntaxError cannot use import outside a module error that occurred while working with Es6 modules and what ES6 modules are in JavaScript. ES6 modules were introduced after the EcmaScript version 6 update there were different types of new functions and methods also introduced. As in this article, we will see the ES6 concept module so I expect you have experience in working with new ES6 JavaScript syntax.

If you don’t have experience working with ES6 concepts I will recommend the Codedamn platform where you can learn coding interactively there are different courses on various technologies whether you have experience in coding or not you can learn from scratch and build projects to showcase in your resume.

What are ES6 Modules?

ES6 Modules are handy concepts which were introduced after EcmaScript version 6. ES6 syntax makes code more readable and makes writing code very efficient. In JavaScript, modules are used to break our code into small chunks and use them where needed. There is a term in the programming world i.e Modular Programming in which Software Developers write their code in a modular way which helps them to make their code more readable.

Modern websites and web applications are created with modular programming approaches because the codebase became very large while development so writing the code separately is the best way to make the codebase more structured and readable. Below is a screenshot of a modular programming approach project folder with different ES6 modules.

Above in the screenshot, you can see how the project is structured and readable a developer who doesn’t work on this project will also be able to understand what the codebase is all about and where the code for a specific functionality is.

SyntaxError: Cannot use import statement outside a module

Let’s now see about the SyntaxError cannot use import outside a module error, this error often occurs while working with ES6 modules. And what this error says is we can’t use an import statement outside a module which means the web browsers don’t know what the type of the file is we are not specifying the type of file while loading our JavaScript file in the web browsers. The web browsers don’t understand the advanced syntax of JavaScript so we use a compiler such as Babel to convert our ES6 code back to ES5 or lower.

Below is the screenshot of the error that we will be going to see and how we can fix it in different ways in JavaScript.

Different ways to fix the SyntaxError: Cannot use import statement outside a module error

There are different ways to fix this error in JavaScript we will be going to see the most used and efficient one.

Using the type attribute

The type attribute is an HTML attribute we can add to the <script> tag in our HTML markup, which tells the browsers which type of javascript file we are trying to render on our webpage.

Below is the code example of how we can add the type attribute and fix the cannot use import outside a module error.

Here is the codedamn playground code example.

<script type="module" src="script.js"></script>
Code language: HTML, XML (xml)

After adding the type attribute to the <script> tag the error will resolve. As you can see in the screenshot shown below.

Using the .mjs extension

The .mjs is a JavaScript file extension which we can add to the JavaScript file. This tells the browsers that the file we are trying to render is a modular file, So while in the render phase the JavaScript engine will find the type of file it is. And then it will not throw the SyntaxError: Cannot use import statement outside a module error.

Here is the code example with .mjs a file extension on the Codedamn playground.

Just by changing the file extension from .js to .mjs will resolve the error. As shown in the screenshot below.

You can fix this error with the .mjs extension. These are the two ways for solving SyntaxError: cannot use import statement outside a module error.

Conclusion

And here ends our article on the Fix SyntaxError: cannot use import statement outside a module error. In this article, we talked about what ES6 modules are, and why the SyntaxError: cannot use import outside a module error occurs while working with ES6 modules. And we saw two different ways to fix the SyntaxError: cannot use import statement outside a module error. I hope this article can solve your problem.

If you want to know more about JavaScript and learn new technologies must visit Codedamn where you can learn and code interactively. That’s it for this article, stay connected with Codedamn News for recent articles.