How To Solve Uncaught SyntaxError: Cannot use import statement outside a module when importing ECMAScript 6 – Definitive Guide

Node.js supports ECMAScript modules to package reusable JavaScript codes. Modules are defined using multiple import and export statements.

You can include type="module" attribute in your script tag to solve Uncaught SyntaxError: Cannot use import statement outside a module when importing ECMAScript 6.

Cause of Error
The error occurs when you work with ECMAScript modules; it is required to inform the browser or ECMAScript modules loader about module usage.

If meta information is not conveyed, it will end up in Uncaught SyntaxError: Cannot use import statement outside a module when importing ECMAScript 6.

Solution
You need to include information(type=" module") in the your script to make browser understand about the usage of modules.
Code

    //index.html
    <!DOCTYPE  html>
    <html  lang="en">
        <head>

            <script  src="main.js" type="module"> </script>   

            <title>html form</title>
        </head>
        <body>
            <div  class="subscribe-container">
            <h1> Welcome To <b>TechMam</b></h1>
            <h2> Happy Learning!!!</h2>
        </div>
        </body>
    </html>

There are other possible ways to get this error. Let us see how to solve the Uncaught SyntaxError: Cannot use import statement outside a module when importing ECMAScript 6 in detail.

Include type=’module’ inside script tag

You need to explicitly inform the browser about using the Javascript modules in your code.

Code

    //index.html
    <!DOCTYPE  html>
    <html  lang="en">
        <head>

            <script  src="main.js"></script>    

            <title>html form</title>
        </head>
        <body>
            <div  class="subscribe-container">
            <h1> Welcome To <b>TechMam</b></h1>
            <h2> Happy Learning!!!</h2>
        </div>
        </body>
    </html>
    //main.js
    import { getWelcomeText, message } from  "./utils.js";
    const  welcomeText = getWelcomeText(message);
    console.log(welcomeText);
    //utils.js
    export  function  getWelcomeText(name) {
    return  `Welcome to ${name}`;
    }
    export  const  message = "TechMam, ES6 Tutorial";

Below, Node.js code(index.js) is used to create a server for running ES6 module code.

    //index.js
    import  express  from  'express';
    import { fileURLToPath } from  'url';
    import { dirname } from  'path';
    const  __filename = fileURLToPath(import.meta.URL);
    const  __dirname = dirname(__filename);
    const  app = express();
    app.use(express.static(__dirname));
    app.get('/',function(request,response){
    response.sendFile(__dirname + "/index.html");
    });
    app.listen(3000);
    node index.js

Output

    Uncaught SyntaxError: Cannot use import statement outside a module (at main.js:1:1)

You can see the above error in your browser console.

Include type =’module’ attribute in your script tag to make ECMAScript modules loader to handle the JS Modules.

    //index.html
    <!DOCTYPE  html>
    <html  lang="en">
        <head>

            <script  src="main.js"  type="module"></script>

            <title>html form</title>
        </head>
        <body>
            <div  class="subscribe-container">
            <h1> Welcome To <b>TechMam</b></h1>
            <h2> Happy Learning!!!</h2>
        </div>
        </body>
    </html>

Output

    Welcome to  TechMam, ES6 Tutorial

Include type:’module’ in package.json

In Node.js, When importing ECMAScript 6 modules, the author has to tell node.js to use the ECMAScript modules loader using the type attribute in the package.json.
If the configuration denotes ECMAScript 6 module usage, you will encounter SyntaxError: Cannot use import statement outside a module.
Code

    //package.json
    {
        "name": "TechMam",
        "version": "1.0.0",
        "description": "TechMam Tutorials",
        "main": "index.js",
        "scripts": {
            "start": "node index.js"
        },
        "author": "sv"
    }
    //index.js
    import  *  as  os  from  'os';
    console.log("total free memory : ",os.freemem());
    node .\index.js

Output

import * as os from 'os';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1031:15)
    at Module._compile (node:internal/modules/cjs/loader:1065:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at node:internal/main/run_main_module:17:47

Code

    //package.json
    {
        "name": "TechMam",
        "version": "1.0.0",
        "description": "TechMam Tutorials",
        "main": "index.js",

        "type" : "module",

        "scripts": {
            "start": "node index.js"
        },
        "author": "sv"
    }
    //index.js
    import  *  as  os  from  'os';
    console.log("total free memory : ",os.freemem());

Output

    node .\index.js
    total free memory :  1066844160

Note: After you include "type" : "module" in your package.json then require('moduleName') cant be used to include import modules inside your application.

If you try to use require() after converting your application to ES6 format, you will get the below error,

    const express = require('express');
                    ^
    ReferenceError: require is not defined in ES module scope; you can use import instead.
    This file is being treated as an ES module because it has a '.js' file extension and 'C:\Node\package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
        at file:///C:/Node/index.js:5:17
        at ModuleJob.run (node:internal/modules/ESM/module_job:185:25)
        at async Promise.all (index 0)
        at async ESMLoader.import (node:internal/modules/ESM/loader:281:24)
        at async loadESM (node:internal/process/esm_loader:88:5)
        at async handleMainPromise (node:internal/modules/run_main:65:12)

Update ‘.js’ files extension to ‘.mjs’

You can also update the file extension( '.js' -> '.mjs') to Solve the Uncaught SyntaxError: Cannot use import statement outside a module” when importing ECMAScript 6.

Code

    //index.js
    import  *  as  os  from  'os';
    console.log("total free memory : ",os.freemem());
    node .\index.js          

Output

    import  *  as  os  from  'os';
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1031:15)
    at Module._compile (node:internal/modules/cjs/loader:1065:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at node:internal/main/run_main_module:17:47

Just updating the file extension like below can resolve the issue,

    //index.mjs
    import  *  as  os  from  'os';
    console.log("total free memory : ",os.freemem());
    node .\index.mjs 

Output

    node .\index.mjs
    total free memory :  1500504064

If you use this file extension option, you are not required to include the type attribute in the package.json.

Also, using file extension, you can build a library that supports both import and require, allowing us to solve the incompatibility issues.

Pass Input Type Field as an argument

You can include flag --input-type=module to the Strings passed in as an argument to –eval or –print or piped to node via STDIN.
Code

    node --eval "import  *  as  os  from  'os';console.log('total free memory : ',os.freemem());"

Output

    import  *  as  os  from  'os';console.log('total free memory : ',os.freemem());
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module
    at new Script (node:vm:100:7)
    at createScript (node:vm:257:10)
    at Object.runInThisContext (node:vm:305:10)
    at node:internal/process/execution:81:19
    at [eval]-wrapper:6:22
    at evalScript (node:internal/process/execution:80:60)
    at node:internal/main/eval_string:27:3

You can include flag --input-type=module to the String passed to use the ECMAScript modules loader.
Code

    node --input-type=module --eval "import  *  as  os  from  'os';console.log('total free memory : ',os.freemem());"  

Output

    total free memory :  1446035456

Let us see another example for printing the output of a String passed as an argument.
Code

    echo "import * as os from 'os';console.log('total free memory : ',os.freemem());" | node --input-type=module  

Output

    total free memory :  1446035456

EcmaScript 6 Modules Vs Common.Js Modules

EcmaScript 6 ModulesCommon.Js
import statements are used for including other modules(ex: import * as os from 'os')require function are used for including other modules(ex: const os = require(os)
File extensions are mandatory while importing user-defined modules (ex: import { name } from "./index.js";)File extensions are not mandatory (ex: const name = require(./index)
Older Node version does not support ES 6Common Js was the standard for Node modules
ES Modules, imports are static and cannot be used in the middle of codeCommonJS imports are dynamically resolved at runtime.

Summary

You have learned how to Solve Uncaught SyntaxError: Cannot use import statement outside a module when importing ECMAScript 6.

ECMAScript is a standard for languages like JavaScript, and while using both ECMAScript and CommonJs modules, errors are likely to happen.

You have also learnt about multiple ways of the Uncaught SyntaxError: Cannot use import statement outside a module occurrence and possible Solve.

You May Also Like

Leave a Comment