Web development has changed significantly recently, with development frameworks and modules being the norm over traditionally coding websites in HTML, CSS and PHP. While these frameworks have immense advantages, they can occasionally cause a few issues.
In this article, we’re talking about the “cannot use import statement outside a module” error in Node, Typescript or just about every other framework that requires importing files, its reasons and what you can do to fix the problem.
What causes the “cannot use import statement outside a module” error?
Regardless of the framework or language you’re working in, the issue is caused when a module you’re trying to import is out of the program’s environment. There are a few reasons why this might happen.
- Module not installed or loaded properly
- The module version is outdated
- Project configuration issues
- Wrong import command
- The incorrect module system is set in the Node configuration
Also read: How to fix ‘React-scripts: Command not found’ error?
How to fix the “cannot use import statement outside a module” error?
Here are three fixes you can try out.
Check if the module is installed
One of the first things you should do is check to see if the module you’re trying to import is installed. To do so, open a terminal and install the module you want to import using the package manager of your choice. If you’re in a Node environment, you’re probably using NPM.
Use the following syntax to install modules with NPM.
npm install [module name]If the module is already installed, you’ll get a message saying it’s already present, and it’ll be updated to the latest version if the installation is older. If not, the module will be installed, possibly fixing your issue.
Check the import command
The commands required for importing modules can differ depending on whether your Node ecosystem uses ESM (ECMAScript Modules) or CommonJS. ESM uses import and export keywords, while CommonJS uses the require() method.
For CommonJS:
const { foo } = require('./bar.js');For ESM:
import { foo } = from './bar.js' ;Also read: How to force pull in Github?
Change your project’s module system
If you don’t want to change your import statements, you can always switch between ESM and CommonJS module systems by changing one line in your project’s package.json file. Just open the file and locate the type property.
For CommonJS:
{
"type": "commonjs"
}For ESM:
{
"type": "module"
}Also read: Fix: Error: Emit attempted before angular webpack plugin initialization
