JavaScript Cannot Use Import Statement Outside A Module
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Amruta
In this article we will show you the solution of JavaScript cannot use import statement outside a module, sometime when we use JavaScript ES6 version import and export concept, we face an error. the error display 'cannot use import statement outside a module'.
If we run the block of code, the syntax error occurs displaying unexpected token.
to solve this problem we set "type" = "module" in the package.json is Node.js which is the main configuration file. If we want to solve in the html page, we have to use the .mjs extension for the JavaScript file.
Step By Step Guide On JavaScript Cannot Use Import Statement Outside A Module :-
We will use .mjs file to solve the error. We will see a simple example of import and export function.
Code For HTML File
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> JavaScript cannot use import statement outside a module </title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
<style>
h1 {
color : rgb(95, 194, 95) ;
font-size: 25px;
font-weight : bolder ;
}
</style>
<script src="./module.mjs" type="module"></script>
</head>
<body>
<center>
<h1> TALKERSCODE </h1>
<h3> JavaScript cannot use import statement outside a module </h3>
</center>
<p id="sum"></p>
</body>
</html>
- To write HTML code <! DOCTYPE html> to mention which version of the HTML file is written in.
- Then we have to write the <html> tag used to define the root of an HTML document. And also write the ending tag </html>.
- <head> tag used here to use to contain the metadata about the HTML file and end it with </head> tag
- Then <title> tag is used to set the title of the HTML document and end it with </title> tag.
- In order to style the HTML page, we'll utilize an external CSS file
- using <style> tag to add CSS
- using <script> with a src of the module.mjs and the type of module.
- <h1> tag used to add a heading close it with </h1> tag
- <p> tag created with the id of sum that will show the result.
Code For exportmodule.mjs
function getSum(num1, num2) {
return(num1+num2) ;
}
function getMul(num1, num2) {
return num1*num2 ;
}
export {getSum as sum, getMul as mul}
- In this javascript file, at first we will created a function called getSum that will return sum of any two number
- Another function created getMul that will return the multiplication of any two number
- Using export function here.
Code For defaultmodule.mjs
const myFunc = {
Message:function displayMessage(msg) {
console.log(msg) ;
} ,
Sum:function getSum(num1, num2) {
console.log(num1+num2) ;
}
}
export default myFunc ;
- Create a constant using const named myFunc
- Display message using displayMessage function and get the sum using getSum() function
- Using export
Code For module.mjs
import * as cal from './exportmodule.mjs'
import myFunc from './defaultexport.mjs'
myFunc.Message("this is default export")
console.log('sum of two number = ${myFunc.Sum(34,56)}')
console.log('sum of two number = ${cal.sum(23,56)}')
console.log('multiply of two number = ${cal.mul(23,56)}')
document.getElementById("sum").innerHTML = `Sum of two numbers = ${myFunc.Sum(34,56)}` ;
- Import cal from the exportmodule.mjs
- Also import the myFunc from the defaultexport.mjs
- Using console.log to display the sum and multiplication
- Also using document.getElementById() with the id of the <p> in the HTML file to display the sum.
Conclusion :-
At last, here in conclusion, we can say that with this article’s help, we know the solution for cannot use import statement outside a module in JavaScript.
I hope this article on JavaScript cannot use import statement outside a module helps you and the steps and method mentioned above are easy to follow and implement.
About Amruta
