Register Login
Python Photoshop SAP Java PHP Android C++ Hadoop Oracle Interview Questions Articles Other

JavaScript Error: “cannot use import statement outside a module"

Updated Jan 20, 2023

Users often face errors in JavaScript codes and can check and correct those code errors shown in the console. One of the most common errors found among users, especially those who are a beginner in JavaScript code, is that users try to use the "import" statement when they use the CommonJS, which only uses the "required" statement.

The interpreter shows "Uncaught SyntaxError: cannot use import statement outside a module" as the error in the console. In this article, we will explicitly discuss JavaScript errors and how to fix the error mentioned above.

What is an error in programming?

Errors are the problems or mistake that arises when users create a wrong code structure or a bad program, which makes the program behavior odd. Experienced developers can also make these kinds of mistakes and generate errors.

Users can also term the Programming errors as faults or bugs, and the method of correcting these bugs is known as debugging.

In JavaScript, there are seven types of errors. These are as follows:

  • RangeError
  • SyntaxError
  • ReferenceError
  • TypeError
  • URIError
  • InternalError
  • EvalError

What is "Uncaught SyntaxError: cannot use import statement outside a module"?

The JS engine shows this error for one reason. The ES Modules is the ECMAScript standard for operating with different JS modules. This error occurs when users are trying to use import and are not inside an ES module.

JavaScript supports a built-in module format known as the ES Modules or ECMAScript. This module uses the import and export keywords instead of the out-of-date CommonJS syntax.

If a user is running their JS code and found this error, they may be having one or more of the following problems:

  • Users are using the Node version < 13.2.0
  • Users are using Node without a valid package.json settings
  • Users are using the browser version that does not support ES modules
  • Users did not correctly specify the type in their browser <script> tag
  • All the mistakes mentioned above create a lot of confusion, especially when they are new to JavaScript.

There are two possible ways a user can run their JS code, either in the Node.JS or the browser. In the following sections, we will discuss how to solve these errors in these two different platforms.

Note: The "cannot use import statement outside a module" is a SyntaxError type of JavaScript error.

Fix the error by adding the type= "module":

When users use the ECMAScript modules and JavaScript module import statements in the browser, they will need to inform the browser that the script is a module explicitly.

For this, users add type = "module" inside the <script> tags that refer to the JavaScript module. Once users do this, they can import the module without issues.

The syntax of the module is as follows:

<!DOCTYPE html>
<html>
<body>
<script type="module" src="index.js"></script>
</body>
</html>

Note:

Sources for modules are mainly in the src/ folder. So if users are using the script for loading and it contains "src/" in the URL, then they are running the native source code in an unchanged or unaltered state.

It leads to the following error message that shows: "This should be fixed by using the bundled version since the package is using roll-up or something similar to create a bundle."

Fix the error by adding the "type": "module":

If a user is using Node.js or other applications for running the JavaScript code and using import statements instead of directing to load the modules, then they should confirm that their package.json has the property called "type":  "module," as shown below.

{
"type": "module",
}

Note: By default, Node.js uses CommonJS modules.

Fix the error by using the extension .mjs in the files:

While using the Node.js application, users might get the error message "Cannot use import statement outside a module" while using the import statement. Because the Node application does not support the ES6 import and export statements by default, users need to use an alternative way.

Users can use the extension .mjs in their files to make their code error-free. Use the command to run the JavaScript file.

The syntax of the extension is as follows:

node --experimental-modules filename.mjs

Fix the error by using the import required:

Users often need to use the import and require statements both for loading the module properly. They should follow the code structure to make their JavaScript free from errors.

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

Conclusion:

The "cannot use import statement outside a module" syntaxerror arises when users use the ES6 Modules syntax in the script tag, and the JS engine does not load this as a module. In this article, we hope users find solutions with these methods to solve this problem: by setting the type attribute to the module when loading a script or using the package.json for Node.js applications.

Recommended Posts:
×