Uncaught syntaxerror cannot use import statement outside a module

The error “Uncaught SyntaxError: Cannot use import statement outside a module” occurs due to the below reasons.

  1. ES6 Modules syntax used in a script that is not loaded as a module
  2. ES6 module imports in Node.js in which the ‘type’ property is not ‘module’ in the package.json file

Error “Cannot use import statement outside a module” in the browser

The error “Cannot use import statement outside a module” occur in the browser due to ES6 Modules syntax used in a script that is not loaded as a module. In javascript, the import statement was limited to use only in a module system and cannot be used in a global scope. Let us explain with an example.

Consider a helper.js with an export statement.


export const  getMessage = () => {
    return "Hello world";
}

This exported getMessage can only be used in a script with type="module" as given below.

<html>
    <head>
        <title>Document</title>
    </head>
    <body>
        <div> Some html contents </div>
        <script type="module">
            import { getMessage } from './helper.js';
            const message = getMessage();
            console.log(message);
        </script>
    </body>
</html>

If the attribute type="module" is given, then the browser will know that the script is a JavaScript module. The browser will allow import statements within that script. The import statement can be used to import functions or objects that are exported from an external module.

When you give import and reference to the javascript file, make sure to give relative references starting with either "/", "./", or "../". eg: './helper.js'.

As another solution, you can use of babel to convert import statements into older javascript syntax. This transpiled code can be used in your document.

Read more about import statements.

Error “Cannot use import statement outside a module” in the node.js

Error “Cannot use import statement outside a module” occur in the node.js is due to the ‘type’ property is not as ‘module’ in the package.json file.

Here is an example.

import express  from 'express';
const app = express();

app.listen('3000', () => {
    console.log("Server listen on 3000!");
});

In this code, we used import statements to import express. This will throw an error unless we have declared ‘type’ property as ‘module’ in package.json file. The below sample package.json.

{
  "name": "sample project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  ...
  ...
  ...
}

The "type": "module" allows you to use the import statements in the project. Otherways you can use of require statement as:

const express  = require('express');

Conclusion

To solve “Uncaught SyntaxError: Cannot use import statement outside a module” add the attribute type="module" to the script tag while running javascript in the browser. If you are using a Node server, then add "type": “module” in the package.json file to enable the use of import statements.

  • JavaScript
  • Node.js

On datainfinities.com, Read articles all around JavaScript, React, Node.js, PHP, Laravel, and Shopify.

Related Blogs

How to fix npm ERR! Missing script: "start"

Find greatest common divisor (GCD) in JavaScript

What are Parameters, Arguments and Arguments Object in JavaScript

Can't set headers after they are sent to the client

What is Call Stack in JavaScript

Scaling Node.js Applications With PM2 Clusters

Factory Design Pattern in JavaScript

How to Fix error:0308010C:digital envelope routines::unsupported

Cannot read property of undefined in JavaScript

Explore All Blogs