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 “Object of Type ‘int’ has no len()”

How to Fix “python: can’t open file ‘manage.py’: [Errno 2] No such file or directory”

Best Binance Referral ID Code in 2022

About the author

Lim How Wei

Lim How Wei is the founder of followchain.org, with 8+ years of experience in Social Media Marketing and 4+ years of experience as an active investor in stocks and cryptocurrencies. He has researched, tested, and written hundreds of articles ranging from social media platforms to messaging apps.

Lim has been quoted and referenced by major publications and media companies like WikiHow, Fast Company, HuffPost, Vice, New York Post, The Conversation, and many others. One of his articles about the gig economy was quoted by Joe Rogan who hosts The Joe Rogan Experience (arguably the most popular podcast in the world), in the This Past Weekend podcast by Theo Von.

In his free time, Lim plays multiple games like Tower of Fantasy, League of Legends, Counter-Strike, Hearthstone, RuneScape, and many others. He creates guides, walkthroughs, solutions, and more on games that he plays to help other players with their progression.