Skip to content

Fix: Cannot use import statement outside a module

  • by
  • 3 min read
Top 7 games for kids to learn coding | Candid.Technology

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

nv-author-image

Yadullah Abidi

Yadullah is a Computer Science graduate who writes/edits/shoots/codes all things cybersecurity, gaming, and tech hardware. When he's not, he streams himself racing virtual cars. He's been writing and reporting on tech and cybersecurity with websites like Candid.Technology and MakeUseOf since 2018. You can contact him here: [email protected].

>