by Sai gowtham

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.

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

console.log(add(1, 2));
console
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.

Css Tutorials & Demos

How rotate an image continuously in CSS

In this demo, we are going to learn about how to rotate an image continuously using the css animations.

How to create a Instagram login Page

In this demo, i will show you how to create a instagram login page using html and css.

How to create a pulse animation in CSS

In this demo, i will show you how to create a pulse animation using css.

Creating a snowfall animation using css and JavaScript

In this demo, i will show you how to create a snow fall animation using css and JavaScript.

Top Udemy Courses

JavaScript - The Complete Guide 2021 (Beginner + Advanced)
JavaScript - The Complete Guide 2021 (Beginner + Advanced)
64,026 students enrolled
52 hours of video content
View Course
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
284,472 students enrolled
40 hours of video content
View Course
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
152,857 students enrolled
48.5 hours of video content
View Course