SyntaxError cannot use import statement outside a module in JS

In this article, we will discuss the causes of the “SyntaxError cannot use import statement outside module” error and how to fix it.

Why does the “SyntaxError cannot use import statement outside module” error occurs?

There are many reasons behind this error.

Your Node version < 13.2.0
Your package.json does not set properly in Node JS application
Your browser does not support ES modules
You did not properly specify the type in your HTML <script> tag

How to fix “SyntaxError cannot use import statement outside module”?

We can have this error in the browser, Node and TypeScript Project.

Browser

To fix this error in browser set type attribute to module in you HTML script tag.

index.html

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <!-- ✅ type set to module ✅ -->
    <script type="module" src="main.js"></script>
</body>
</html>

Now you can use the ES6 module in your JavaScript code.

main.js

import moment from 'moment';

console.log(moment.utc().format('YYYY-MM-DD')); // 👉️ '2022-08-19'

If you are using ES6 module syntax in your JavaScript code, then it should be loaded with the type attribute set to module.

Node JS

To fix the “Cannot use import statement outside module” error in Node JS, set the type property to module in the package.json file.

package.json

{
  "type": "module",
  // 👇️ other properties ...
}

If there is no package.json file in your project, you can simply create using npm init -y command in the root directory of the project.

Now you can use ES6 syntax in your Node JS app.

When you are importing a local file with the type set to module, you have to include the .js extension in the import statement.

app.js

import {calculatePercentage} from './custom-modile.js';

console.log(calculatePercentage(10, 100)); // 👉️ 10

If you removed the extension, you would get the error – “Error [ERR_MODULE_NOT_FOUND]: Cannot find module X”.

If still not fixed, try using the require() syntax for the import and export module.

app.js

// 👇️ for default exports
const customFunction = require('packageName');

// 👇️ for named exports
const {namedFunction} = require('packageName')

TypeScript

To solve the “Cannot use import statement outside module” error in TypeScript, set module to commonjs in the tsconfig.json file.

tsconfig.js

{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "esModuleInterop": true,
    // ... your other properties
  }
}

If you are getting the error in the TypeScript project, use the ts-node command to transpile and run the .ts file because this error also occurs while you use the node command to run TypeScript files.

Conclusion

Now you know what causes the “SyntaxError cannot use import statement outside module” and how to fix it in Browser, Node JS and TypeScript.

Learn More: