In the development phase, the developers encounter numerous errors and one among them is “Cannot use import statement outside a module” in JavaScript. In a JavaScript server-side runtime environment, using import syntax for modules written in ECMAScript (ES) when Node.js expects the required keyword used by CommonJS module system could result in the error.
Though different module formats are supported by TypeScript, coding errors that confuse the ES and CommonJS approaches to importing modules results in this kind of error. On the browser side, the error occurs when you forget to use a bundler for your JavaScript code files.
In this article, we will talk about the error sources for “cannot use import statement outside a module” with detailed solutions for all.
Understanding the Error Message
Before discussing the ways to solve this problem, let us first understand the error message. The latest addition of import/export syntax in JavaScript ES6 version let developers modularize their code to maintain and reuse. But if JavaScript encounters an import statement in a script that it is not able to recognize as a module, this causes the error.
Two of the main module systems in JavaScript include CommonJS and ES6 Modules.
CommonJS: This module system is used in Node.js. It uses the require () function while importing modules and the module.exports object to export functionality from a module.
ES6 Modules: These modules are standardized module systems used for JavaScript. They use import/ export keywords to get the similar functionality as CommonJS modules.
Primary Causes of “Cannot use import statement outside a module”
Let’s check out some of the reasons behind this error.
Using ES6 import in a CommonJS environment: It is one of the most common reasons for this error. While using the import statement in a CommonJS environment like Node.js, the system doesn’t recognize the same, thus causing the error.
Incorrect file extension: Another possible reason for this error could be using an incorrect file extension for ES6 modules.
Missing or incorrect MIME type: In case of the wrong or incorrect MIME, the browser will not be able to recognize the file as a module, causing the error.
Ways to “Fix the TypeScript SyntaxError: Cannot use import statement outside a module Error
Beneath we have provided information regarding the ways to fix this problem.
In case you are using the newest version of TypeScript for your Node app, the tsconfig.json file has default rules preventing the error from being raised.
So, there are higher chances that you might not encounter this error. The ways of preventing it include:
- Install the latest version of TypeScript, use the default tsconfig.json file which is generated while running tsc init with the latest version.
- Setup TypeScript correctly for Node and deploy the necessary packages.
On the other hand, in case you have not deployed the latest tsconfig.json file configurations then error is raised.
To solve this, head over to the tsconfig.json file and scroll to the modules section. The rule that will be shown under the modules section is:
/* Modules */
“module”: “esnext”
The best way to solve this problem is to change the value “esnext” to “commonjs”.
/* Modules */
“module”: “commonjs”
How to Solve the JavaScript SyntaxError: Cannot Use Import Statement Outside a Module Error
This error is different between vanilla JS and TypeScript.
Check out this:
import express from “express”;
const app = express();
app.listen(3000, () => {
console.log(“Hello World!”);
// SyntaxError-Cannot use import statement outside a module
});
The reason for this is the same, we have used the import keyword to import a module. In order to fix this error, go to the package.json file and add “type”: “module”,. That is:
{
“name”: “js”,
“version”: “1.0.0”,
“description”: “”,
“main”: “app.js”,
“type”: “module”,
“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1″
},
“keywords”: [],
“author”: “”,
“license”: “ISC”,
“dependencies”: {
“express”: “^4.18.2”
}
}
Now one can easily import keywords without getting an error. In order to solve this loophole while working with JavaScript on the client side (without any frameworks), just add the attribute type=”module” to the script tag of the file you want to import as a module. That is:
Summary
There are numerous reasons for the cause of the error “Cannot use import statement outside a module” based on whether you’re in a browser-side or server-side JavaScript environment. Wrong syntax, mismatched configurations, and unsupported file extensions are the reasons for this error.
If you are using a JavaScript application and want all the applications to run smoothly, then connect with Java developers at Kodehash Technologies. Our dedicated Java professionals bring expertise to ensure success of your project.