Home » How-To » How to Fix “Uncaught SyntaxError: Cannot use import statement outside a module”

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

Are you getting the “Cannot use import statement outside a module” error when you’re importing something?

Here’s the full error message, “Uncaught SyntaxError: Cannot use import statement outside a module”.

The main reason why you’re getting the “Uncaught ReferenceError: ms is not defined” is that modules are scoped.

Since you’re loading the library using native models, “ms” is not accessible in the script tag as it’s not in the global scope.

In other words, you’re trying to run the file independently.

According to the official Node.js documentation, import statements are only permitted in ES modules.

Hence, to fix the “Uncaught SyntaxError: Cannot use import statement outside a module” error message, you need to make Node.js treat your file as an ES module.

The error message can happen on WordPress, TypeScript, JavaScript, and more.

Before you attempt to fix it, you need to make sure that you have the latest version of Node.js.

After that, try using the methods below:

Method 1: Add type=”module” within the script tag

Add type=”module” within the script tag.

This will denote that it is a JavaScript module.

Before (wrong):

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

After (correct):

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

If you’re getting a CORS error from this, you need to add “Access-Control-Allow-Origin: *” in your headers.

Method 2: Add type=”module” in the package.json file

Add “type”: “module” in the nearest parent package.json file.

This will make sure that the .js and .mjs files are denoted as ES modules.

However, if you’re using .ts files, you need to use “nodemon” instead of “node”.

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

Method 3: Replace “import” with “require”

Try 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');

Method 4: Reference typeORM

You need to use “dist” and “js” instead of “src” and “ts”.

Before (wrong):

   "entities": [
      "src/db/entity/**/*.ts",
   ],

After (correct):

   "entities": [
      "dist/db/entity/**/*.js", 
   ],

Method 5: Replace “esnext” with “commonjs”

If you’re encountering the error on TypeScript, you need to do the following:

Instead of:

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

Use:

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

Conclusion

The “Uncaught SyntaxError: Cannot use import statement outside a module” error is one of the most common errors that developers face.

There are over 1.7 million views of it on StackOverflow.

In most cases, the error message happens because you didn’t include type=”module” inside the script tag.

Including type=module will denote that it is a JavaScript module.

Further reading

How to Fix “Downloading English (US) Update Waiting For Network Connection”

How to Fix “A JavaScript error occurred in the main process” on Discord

Best Binance Referral ID Code in 2022

About the author

Lim How Wei

Lim How Wei is the founder of followchain.org, with over 7+ years of experience in Social Media and 3+ years of experience in investing in stocks and cryptocurrencies. He has researched, tested, and written hundreds of articles ranging from social media platforms to messaging apps.