“Cannot use import statement outside a module” is a common error in a NodeJS application while working with JavaScript or TypeScript. I faced this issue in the Node.js application for both JS and TS. Here, I will tell you its main causes and most possible ways to resolve it.
For both JS and TS, there are different solutions for this error. I will explain all of them, let’s start.
Cannot use import statement outside a module
First of all check whether you are using the latest version (or >= 13.2.0) of Node.js or not. If not, try updating node.js version and then try. If you are already using the latest version, then try the following solutions.
For JavaScript (if Node.js application is in JS)
For JavaScript, try the following solutions:
Solution 1
Sometimes this issue is related to the extensions .js and .mjs. To resolve it, you need to add the type property in the package.json file. In the top level, add this field as:
{
"name": "app-name",
"version": "1.1.1.1",
"type": "module",
"scripts": {},
...
}
After adding this field, .js and .mjs files will be interpreted as ES modules. Also it can be done by interpreting the individual files as CommonJS by using .cjs extension, see solution 2.
Solution 2
In this solution, you will need to rename all of the files with extension .mjs. Now you will not need to add type property in the package.json file.
Alternative Solution
In this solution, you need to change .js files to .mjs.
import { createRequire } from 'module'
const require = createRequire(import.meta.url);
and easily use the ‘require’ as usual.
Cannot use import statement outside a module – for TypeScript
Once I faced this issue in TypeScript also, to resolve it here you need to edit the tsconfig.json file. Just replace the property
"module": "value"
with
"module": "commonjs".
Note: for babel-node you need to change the –extensions option like babel-node --extensions \".ts,.tsx\" src/index.
Error in Browser for JavaScript
When you get this issue (“cannot use import statement outside a module”) in the browser console (in case of ES6), you will need to do some minor changes to get rid of it.
<body>
<script type="module" src="index.js"></script>
</body>
This way all of the JS files will be loaded as the type of ‘module’. This is also a common issue when you are working with ES6 and importing the JS file with type mismatch.
Lastly,
Here I have written the most effective and common solutions for this error. In most of the cases you will definitely resolve this issue with one of the solutions provided here.
In some cases these solutions may not work and I need more information about the error for resolution. In these cases you are welcome to use the comment box to elaborate your problem, I will give you the solution as soon as possible.
So this is the solution on the basis of my understanding of the issue, also I have gone through some of the online solutions from other developers. You are also welcome to share your views on this issue, and give any alternative solution if you have. It will help the developers. Also feel free to contact me.
