Fix - Cannot use import statement outside module in JS

Fix - Cannot use import statement outside module #

The "SyntaxError: Cannot use import statement outside a module" occurs when we use the ES6 Modules syntax in a script that was not loaded as a module. To solve the error, set the type attribute to module when loading the script - <script type="module" src="index.js"></script>.

syntaxerror cannot use import statement outside module

Here's an example of how the error occurs. This is our index.html file.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>

    <!-- 👇️ Loading script without type="module" -->
    <script src="index.js"></script>
  </body>
</html>

And here's our JavaScript file - index.js.

index.js

Copied!
// ⛔️ Uncaught SyntaxError:
// Cannot use import statement outside a module
import _ from 'lodash';

console.log(_.uniq([1, 1, 3]));

We're using the ES6 Modules syntax, however we haven't set the type attribute to `module when loading the script.

To solve the "Cannot use import statement outside a module" error, set the type attribute to module when loading the script in your HTML code.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>

    <!-- ✅ type set to module ✅ -->
    <script type="module" src="index.js"></script>
  </body>
</html>

Now we are able to use the ES6 modules syntax in our JavaScript code.

index.js

Copied!
import _ from 'lodash';

console.log(_.uniq([1, 1, 3])); // 👉️ [1, 3]

Note that all of the JavaScript files you use the ES6 modules syntax in have to be loaded with the type attribute set to module.

When working with Node.js, you have to set the type property to module in your package.json file to be able to use ES6 module imports.

package.json

Copied!
{
  "type": "module",
  // 👇️ rest ...
}

If your project does not have a package.json file, you can initialize one using the npm init -y command in the root directory of your project.

Now you are able to use ES6 modules syntax in your Node.js application.

index.js

Copied!
import _ from 'lodash';

console.log(_.uniq([1, 1, 3])); // 👉️ [1, 3]

Fix - Cannot use import statement outside module in JS

Fix - Cannot use import statement outside module #

Join my newsletter

Borislav Hadzhiev