Cannot use import statement outside a module

A file written with import syntax was loaded as an old-style script or CommonJS file, so loading stopped at the first import line.

Terminal and browser console
SyntaxError: Cannot use import statement outside a module

Also appears as

  • Uncaught SyntaxError: Cannot use import statement outside a module
  • SyntaxError: import declarations may only appear at top level of a module
  • SyntaxError: Unexpected identifier 'React'. import call expects one or two arguments.
  • Warning: Failed to load the ES module: /Users/me/my-app/server.js. Make sure to set "type": "module" in the nearest package.json file or use the .mjs extension.
  • Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.

Prompt to fix it

I get "SyntaxError: Cannot use import statement outside a module". Find out which runtime loads the failing file: Node, a test runner, or the browser. Then fix the module format at the source: set "type": "module" in package.json or use .mjs for Node, add type="module" to the script tag for the browser, or configure the test runner for ES modules (Vitest for Vite projects). After the change, find every file that still uses require() or module.exports and rename it to .cjs or convert it. Don’t rewrite the imports to require() as a workaround.

Paste into Layerwise or any AI coding tool.

What it means

JavaScript has two module formats. ES modules use import and export. CommonJS, Node’s original format, uses require() and module.exports. This error means a file with import statements was loaded as CommonJS or, in the browser, as a classic script. The runtime stops at the first import line, before any of your code runs.

In Node, the nearest package.json decides: "type": "module" makes .js files ES modules, .mjs files always are, and .cjs files never are. Recent Node versions retry a .js file as an ES module when its package has no "type" field, so today the error mostly comes from "type": "commonjs", older Node versions, or tools that load files their own way, like Jest and ts-node. In the browser, it means a <script> tag lacks type="module".

The trap is fixing one file and breaking others. "type": "module" changes every .js file in the package, so a config file or script that still uses require() then fails with require is not defined in ES module scope. Rename those few files to .cjs, or convert them to import.

Common causes

  • A test runner like Jest loads files as CommonJS and meets import in your code or in a package that ships only ES modules.
  • A .js server file or script uses import, and package.json says "type": "commonjs" or the Node version predates module detection.
  • A plain HTML page loads a script with <script src="main.js">, and that script uses import.
  • A TypeScript runner such as ts-node loads the file as CommonJS while tsconfig.json tells it to keep import statements.

How to fix it

  1. Note where it fails: in the terminal (Node or a test runner) or in the browser console.
  2. For Node, add "type": "module" to package.json, or rename the file to .mjs. Then rename any file that still uses require() to .cjs.
  3. For the browser, change the tag to <script type="module" src="/src/main.js"></script>, or let your bundler, such as Vite, load the script.
  4. For tests, use a runner with built-in ES module support, such as Vitest in Vite projects, or configure Jest to transform the file, adding ESM-only packages as exceptions in transformIgnorePatterns.
  5. For TypeScript scripts, run them with tsx, or set module in tsconfig.json to match the package’s "type".

Example fix

{
  "name": "my-app",
  "type": "module",
  "scripts": {
    "start": "node server.js"
  }
}

Related errors

All errors
Error: Cannot find module 'express' Require stack: - /Users/me/my-app/server.js

Cannot find module

Node tried to load a package or file that isn’t where the code says it is, usually because it was never installed or the path is wrong.

Failed to load module script: Expected a JavaScript-or-Wasm module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

Failed to load module script

The browser asked for your app’s JavaScript and got an HTML page back, so it refused to run it and the page stayed blank.

ReferenceError: useState is not defined

X is not defined

The code used a name JavaScript can’t find anywhere, usually because of a missing import, a typo, or a Node-only global like process in the browser.

src/App.tsx:3:20 - error TS2307: Cannot find module '@/components/Header' or its corresponding type declarations.

Cannot find module or its corresponding type declarations

TypeScript couldn’t match an import to a file or package it understands, so the build fails even when the app runs fine in the browser.

Build with an agent that checks its work

The Layerwise agent clicks through the live preview and reads the console, so it catches errors before you do.

DownloadRead the docs