[Solved] “Uncaught SyntaxError: Cannot use import statement outside a module” when importing ECMAScript 6

Hello Guys, How are you all? Hope You all Are Fine. Today I am adding milsymbol.js to the script, the console returns the following error Uncaught SyntaxError: Cannot use import statement outside a module in Javascript. So Here I am Explain to you all the possible solutions here.

Without wasting your time, Let’s start This Article to Solve This Error.

How Uncaught SyntaxError: Cannot use import statement outside a module Error Occurs ?

Today I am adding milsymbol.js to the script, the console returns the following error

Uncaught SyntaxError: Cannot use import statement outside a module

How To Solve Uncaught SyntaxError: Cannot use import statement outside a module Error ?

Solution 1: Just Add type=”module” inside the script tag

Just add type=”module” inside the script tag as given below.

<script type="module" src="milsymbol-2.0.0/src/milsymbol.js"></script>

Solution 2: Add “type”: “module” to your package.json

Just Add “type”: “module” to your package.json

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

if you get ReferenceError: require is not defined, you’ll need to use the import syntax instead of requiring. You can’t natively mix and match between them, so you’ll need to pick one or use a bundler if you need to use both.

Solution 3: changing this line

I face this error Because of this line. Before it was like this

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

And after changing it to and It worked perfectly.

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

Solution 4: use the extension .mjs in your files

When using ECMAScript 6 modules from the browser, use the .js extension in your files, and in the script tag add type = "module".

When using ECMAScript 6 modules from a Node.js environment, use the extension .mjs in your files and use this command to run the file:

node --experimental-modules filename.mjs

Solution 5:

I Just resolved this problem by replacing “import” to”require”.

// import { parse } from 'node-html-parser';
parse = require('node-html-parser');

Summery

It’s all About this issue. Hope all solution helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you?

Also Read

• SyntaxError: invalid syntax to repo init in the AOSP code.