JavaScript — Cannot Use Import Statement Outside a Module

What Does This Error Mean?

This error means you used the import keyword, but JavaScript is not treating your file as a module. The import keyword is part of the ES Modules system — a modern way to share code between files. To use import, the JavaScript environment needs to be told the file is a module.

Affected Models

All browsers
Node.js
Deno
Any JavaScript runtime

Common Causes

Using import in a Node.js file without adding 'type: module' to package.json
A script tag in HTML that is missing type='module'
Mixing CommonJS (require) and ES Module (import) syntax in the same project
Running a .js file that uses import with an older version of Node.js
A bundler (like Webpack or Vite) is not set up correctly to handle ES Modules

How to Fix It

If you are running code in Node.js, add 'type': 'module' to your package.json file, or rename your file from .js to .mjs.

In package.json, add this line inside the main object: "type": "module" — this tells Node.js to treat all .js files as modules.
If you are using a script tag in HTML, add type='module' to it: <script type='module' src='app.js'></script>

Without type='module', the browser treats the script as an old-style script where import is not allowed.
If you are mixing require() (CommonJS) and import (ES Module) in the same project, pick one system and stick with it.

Modern JavaScript prefers import/export. Older Node.js code uses require(). Mixing both in the same file causes this error.
Make sure your version of Node.js supports ES Modules. Node.js added full ES Module support in version 12. Run 'node --version' to check.

If you are on Node.js version 10 or older, update to the current LTS version from nodejs.org.
If using a build tool like Webpack, Rollup, or Vite, check the documentation for configuring ES Module support. The tool may need a specific configuration option.

Vite supports ES Modules natively. Webpack requires setting 'experiments: { outputModule: true }' in its config for full ES Module output.

When to Call a Professional

This is a configuration issue, not a logic bug. Most developers fix it in a few minutes by adjusting one setting. If you are new to JavaScript modules, reading the MDN guide on JavaScript modules is a good investment.

Frequently Asked Questions

What is the difference between import and require()?

They both load code from other files, but they are two different systems. require() is the older CommonJS system used in Node.js. import is the newer ES Module system that works in both browsers and Node.js. Most modern JavaScript projects use import/export. Node.js projects often started with require() but are gradually moving to import.

Do I need to change all my require() calls to import?

Not necessarily — require() still works fine in Node.js and is not going away. You only need to use import if you are building a module-based project or need to use a package that only supports ES Modules. If your project is already working with require(), there is no urgency to change.

Why does adding type='module' to the script tag also change how the script behaves?

Module scripts behave differently from regular scripts in a few ways. They are in strict mode by default. They do not share the global scope with other scripts — variables are private to the module. They load asynchronously by default, similar to the defer attribute. These differences are usually helpful, but worth knowing when switching.