AlltechLoaded is reader-supported. We may earn commissions if you buy through our links.

How to Solve Cannot use an import statement outside a module

How to Solve Cannot use an import statement outside a module?

We all love scripting languages, some of us find it very easy to code in any scripting language. So javascript is one of the most popular scripting languages that you can learn in 2020. So javascript of commonly referred to as JS is very easy to learn, but it also has some occasional problems associated with it.

One of these errors is the “cannot use an import statement outside a module” error, so when we are facing this particular error it will be hard for you to move on with your coding. So today I will help you find some useful solutions regarding this particular problem.

Fix this Error

The ‘import’ statement- This particular statement is used to import bindings, bindings that are exported by another module. The imported modules are always in strict mode doesn’t matter whether you declare them that way or not. This import statement cannot be used in scripts unless that particular script has a type= ” module”. The example of this particular this is explained below –

Ex- <script type=”module” src=”app.js”></script>

(if it is not a module, rather it is a script then you can use nomodule tag).

Ex- <script nomoudle src=”classic-app-bundel.js”></script/>

There are a lot of reasons that this particular issue occurs, for example, you might accidentally source a file in the SRC directory instead of the built file in the dist directory.

This means that you are using some foreign code in an uncluttered/unorganized way leading to this particular error.

Another issue frequently faced by the users that are, they might be loading a particular file that uses es6 with a normal .JS file. You should first compile the es6 file then load to fix this particular problem.  

You will have to simply add type=” module” inside your script and your problem will be solved. This statement will tell your browser to treat the main.js file as a module instead of a script file.