SyntaxError: Cannot use import statement outside a module

This error is one of the most common issue if you are trying to use ES6 features in your JavaScript project. For eg: when you import a function from math.js inside main.js file, it throws " SyntaxError: Cannot use import statement outside a module " in you terminal.


import statement outside a module

This can happen in different cases depending on whether you're working with JavaScript on the server-side with Node.js , or client-side in the browser. There are several reasons behind this error, and the solution depends on how you call the module or script tag.


Add type="module" inside the script tag

When working with ECMAScript modules and JavaScript module import statements in the browser, you'll need to explicitly tell the browser that a script is module. To do this, you have to add type="module" onto any ‹script› tags that point to a JavaScript module. Once you do this you can import that module without issues.

Add "type": "module" to your package.json

If you are working on Node.js or react applications and using import statements instead of require to load the modules, then ensure your package.json has a property "type": "module" as shown below.

Use the extension .mjs in your files

If you are using node application and want to use the import statement, then you will also get the " Cannot use import statement outside a module " error. It is because ES6 import and export statements are not support in node by default. In order to solve this problem, use the extension .mjs in your files and use this command to run the file.

Use import by required

In some cases, you may have to use both import and require statements to load the module properly.
 (C) 2022    Founded by raps mk
All Rights Reserved. All other trademarks are property of their respective owners.
SiteMap  | Terms  | About