How to solve the Cannot use import statement outside a module

In this tutorial, we are going to learn about how to solve the cannot use import statement outside of a module error in browser.

When we use an es6 import statement to import one JavaScript file inside another, we might see this following error in our browser console.

import { add } from './math.js';

console.log(add(1, 2));

Uncaught SyntaxError: Cannot use import statement outside a module

To fix this error, we need to add the type="module" attribute to our main entry JavaScript file like this.

<script type="module" src="main.js"></script>

This tells the browser to treat this main.js file as a module instead of a normal script file.

If you are getting this error inside the node.js, you can check out my previous tutorial on how to use es6 imports in Node.js.