SyntaxError: Cannot use import statement outside the module

It is seen that many beginners face an error when they try to import a module while working with Javascript. SyntaxError: cannot use import statement outside the module is the error that occurs while importing a module so let’s discuss the reason behind it. 

The Syntax Error “cannot use import statement outside a module” occurs when the ms is not specified. As you load the library with the usage of native models, “ms” is not approachable in the script tag since it is not in the global scope.

The reason for getting this error is when you try to execute an independent file means to say you can’t import a statement without adding an ES module.

It is mentioned in the official Node.js Documentation that import statements are allowed in ES modules only. To get rid of this Syntax Error: “Cannot use import statement outside a module” you have to create a Node.js file and treat it as an ES module.

You can face this Syntax Error on different platforms like WordPress, TypeScript, JavaScript, and so on, Before fixing the syntax error, download the latest version of Node.js.

There are five ways of fixing this syntax error, they are explained below.

5 ways to fix Syntax Error: “cannot use import statement outside a module”

Add type=” module ” within the script tag

If you are working with an ES module in the browser so you have to directly inform the browser that the written script is a module by adding   type=” module ” within the script tag.

The type module will show that it is a JS (JavaScript) module.

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

After adding the type module in the script you can import the module without facing any syntax error.

Even if you are getting an error that is the same as the following then you might be loading in the uncompiled source variant of a module, instead of compiling the dist script:

“Uncaught SyntaxError: Cannot use import statement outside a module”

In case you are facing a CORS error from adding the module, then add “Access-Control-Allow-Origin: *” in the headers.

Add type=” module ” in the package.json file

In the closest parent package.json file add “type”: “module”.

By adding the type module in JSON the .js and .mjs files will be shown as ES modules.

 if you are using .ts files, you have to use “nodemon” rather than “node”.

{
  // ...
  "type": "module",
  // ...
}

Replace “import” with “require”

The Node.js uses CommonJS modules by default, that uses require(…) for importing an external dependency.

replacing “import { parse } from ‘node-html-parser’;” with “const parse = require(‘node-html-parser’)” 

or 

“const parse = require(‘node-html-parser’);”.

// import { parse } from ‘node-html-parser’; 

const parse = require(‘node-html-parser’);

Reference typeORM

You have to use “dist” and “js” rather than “src” and “ts”.

   "entities": [

      "dist/db/entity/**/*.js", 
   ],

Replace “esnext” with “commonjs”

In case you are getting errors on TypeScript, do this.

   "target": "esnext",
    "module": "commonjs",

Conclusion

In this tutorial we discussed the 5 methods to get rid of the Syntax Error: “cannot use import statement outside a module”.

We discussed the possible methods by following them we can easily import the statement outside the module.

 

Leave a Comment