How to solve the Cannot use import statement outside a module

In this article we will discuss the “SyntaxError: Cannot use import statement outside the module”  In JavaScript, in NodeJS, in Typescript, React-jest . What is it? How can we solve this? Possible methods. Table of …

Cannot use import statement

In this article we will discuss the “SyntaxError: Cannot use import statement outside the module” 

In JavaScript, in NodeJS, in Typescript, React-jest .

What is it?

How can we solve this?

Possible methods.

What is “SyntaxError: Cannot use import statement outside the module”?

It is an error encounter in JavaScript, typescript, NodeJS, React.

 There are two modules of JavaScript

  1. CommonJS 
  2. Es6 

Nodejs , typescript and JavaScript uses commonJS as default module.

Whereas ES6 is the latest edition to ECMA Script

(ECMA Script is a scripting language that provides basis for JavaScript)

That means it as a standard to create modules as per the JavaScript specification.

Since ES6 is a latest edition, the NodeJS uses commonJS as default and it does not include import keyword in it, and when you state the import statement in it.

Then, it will show the syntax error: “cannot use import statement outside the module”.

Let’s see this:

import os from 'os';

console.log(os.version())

When you will execute this piece of code then Nodejs will compile it in the commonJS module. And as it is the keyword of ES6 module.

Then, it will through the uncaught SyntaxError : “cannot use import statement outside the module”.

Let’s execute this and check its output.

Output :

import os from 'os';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Module._compile (internal/modules/cjs/loader.js:895:18)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)
    at Module.load (internal/modules/cjs/loader.js:815:32)
    at Function.Module._load (internal/modules/cjs/loader.js:727:14)
    at Function.Module.runMain (internal/modules/cjs/loader.js:1047:10)
    at internal/main/run_main_module.js:17:11

Now, we know that what is “cannot use import statement outside the module” and when it occurs.

But how can we solve this?

Methods to solve :

“SyntaxError: cannot use import statement outside the module” in NodeJS.

To solve the SyntaxError: “Cannot use import statement outside the module”  in JavaScript and in NodeJS.

follow the methods given below:

Method1:

We will change the file extension from .js to .mjs

This will convert the commonJS module to ES6 module, and as import is a keyword of ES6.

After changing the file extension run the piece of code and it won’t show you an error message again.

Method2:

Go to the package.json file and there you will observe the property named as “Type” and when you write in type property it will show you two options for this: commonJS and module .

Where module is showing the ES6.

Then, Set “Type”: “module”

{
//…
“Type”: “module”
//..
}

After making this change execute your code it won’t show “SyntaxError: Cannot use import statement outside the module”

Method3:

Simply write the type=module inside the script tags.

<script type= “module” src= “.../src/main.js” > </script>

Whenever you write the script within the html file you use script tag and when you won’t specify the type= “module”, then it will automatically assume the commonJS as the type because the commonJS is a default module in JavaScript.

“SyntaxError: cannot use import statement outside the module” in TypeScript.

Method1:

We will change the file extension from .js to .cjs

This will convert the commonJS module to ES6 module in typescript. 

After changing the file extension run the piece of code and it won’t show you an error message again.

Method2: (is same as JavaScript’s and NodeJS’s method2)

Go to the package.json file and there you will observe the property named as “Type” and when you write in type property it will show you two options for this: commonJS and module .

Where module is representing the ES6.

Then, Set “Type”: “module”

{
//…
“Type”: “module”
//..
}

After making this change execute your code it won’t show “SyntaxError: Cannot use import statement outside the module”

Jest- SyntaxError: “Cannot use import statement outside the module”.

Now as we say earlier “import” was the keyword of ES6 and that was throwing error “cannot use import statement outside the module” when we were executing it in commonJS module.

Similarly, here is also the same issue or you can say an opposite issue because JEST does not support the latest JavaScript module ES6.

So, when we directly execute the test with jest then this will throw an error “jest-syntaxerror: cannot use import statement outside the module”.

To solve this error, we will add babel in jest.

Method1:

Upgrade the version of jest, because the latest versions of babel jest are automatically loaded by jest and fully integrated.

Method2:

Adding babel in jest

For adding babel in jest, we have two steps

  1. Installation 
  2. Usage

Installation:

If you upgrade your jest version or you have the new version than you don’t need to install the babel in jest because it is automatically loaded in it.

But if you are using babel-jest to transform typescript files.

Npm install –save-dev babel-jest

Make the following changes in your package.json file.

{
“scripts”: {
“test”: “jest” 
},
“jest”: {
“transform”: {
“^.+\\.[t|j]sx?$”: “babel-jest”
   }
 }
}

Conclusion:

In this article we discussed the “SyntaxError: Cannot use import statement outside the module” in NodeJS ,TypeScript and jest.

And the methods to solve this error.

Suggested Read: 

Suggested Read: Get URL Parameters with JavaScript

Leave a Comment