Javascript Fix Cannot Use Import Statement Outside A Module
When you try to import a function that is declared in another js file, you’ll probably get the error cannot use import statement outside a module like in the screenshot below.
Let’s see how to fix it.
- Cannot Use Import Statement Outside A Module Error
- Add Type Module Attribute To The Script Tags
- Declare & Export A Function From JavaScript Module
- Import Function From Another File
STEP #1: Replicate Cannot Use Import Statement Outside A Module Error
As you can see, there are two JS files included inside the index.html:
- component.js (child)
- app.js (parent)
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Start</title>
</head>
<body>
<script src="component.js"></script>
<script src="app.js"></script>
</body>
</html>Note: you can also add script tags anywhere in an HTML page using defer or async attributes.
Now declare a function inside the component.js and use it inside the app.js.
The sayHello() function is declared inside the component.js file.
component.js
const sayHello = () => {
return "sayHello";
}You can also declare a function using function expression instead of function declaration.
When you try to import the sayHello() function inside the app.js file, you’ll get the cannot use import statement outside a module error.
app.js
import sayHello from './component.js'; // Uncaught SyntaxError: Cannot use import statement outside a moduleThat’s because import statements only work on the JavaScript module, not just the JavaScript file.
So how do I convert them to modules?
STEP #2: Add Type Module Attribute To The Script Tags
Add type=”module” attribute to both script tags so that the component.js and app.js files will become JavaScript modules.
This way you can declare a function in the component.js file to import and use it inside the app.js file.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Start</title>
</head>
<body>
<script src="component.js" type="module"></script>
<script src="app.js" type="module"></script>
</body>
</html>STEP #3: Declare & Export A Function From JavaScript Module
Now, let’s declare a function inside the component.js file called sayHello() which returns the string “sayHello”.
Nothing fancy.
component.js
const sayHello = () => {
return "SayHello";
}In order for other JavaScript modules to use sayHello(), you’ll need to make it public by exporting it.
To do that, add the export keyword in front of the function.
export const sayHello = () => {
return "SayHello";
}Alternatively, you can create a new statement with the keyword export followed by the function inside the JavaScript object.
component.js
const sayHello = () => {
return "sayHello";
}
export {sayHello}Once it’s exported, the sayHello() function becomes global and you can now import it inside the app.js file.
STEP #4: Import Function From Another File
Now import the component.js module inside the app.js module and de-structure the sayHello function.
import {sayHello} from './component.js';
console.log(sayHello()); // sayHelloFinally, call it.
That’s it.
At this stage the cannot use import statement outside a module error will be gone from the developer console and you’ve successfully imported and called a function that is declared from another file in JavaScript.