JavaScript Tutorials

Javascript Fix Cannot Use Import Statement Outside A Module

Last modified on September 19th, 2022
Javascript

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.

  1. Cannot Use Import Statement Outside A Module Error
  2. Add Type Module Attribute To The Script Tags
  3. Declare & Export A Function From JavaScript Module
  4. 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 module

That’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()); // sayHello

Finally, 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.