How to fix Cannot import outside of module in React

ReactINTERMEDIATEMEDIUMUpdated Dec 9, 2025· 121 views

This error occurs when import statements are used outside of valid ES module contexts, often caused by mismatched module systems (ESM vs CommonJS) or files not marked as modules. Fix by configuring your build tool or package.json to properly support ES modules.

Quick fix

Fixes SyntaxError

npm start  # Should work with import statements
  1. Verify your build tool is configured for ES modules
  2. For Node.js scripts, add 'type: module' to package.json
  3. If using Jest for testing, configure it to handle ES modules
  4. Fix TypeScript module configuration
react — error
npm start  # Should work with import statements
Cannot import outside of module

What this error means

This error occurs when JavaScript encounters an import statement outside of a valid ES module context. React applications use ES6 module syntax (import/export), but they must run in an environment that understands modules. The error typically happens when your build system, Node.js runtime, or browser doesn't recognize the file as a module, or when trying to import in a CommonJS context.

Typical symptoms

  • Import statements cause syntax errors during build or runtime
  • Error appears when running scripts with Node.js or in Jest tests
  • Working in browser but fails when running server-side code
  • Mixed usage of import and require statements in same project
  • Third-party dependencies fail to load with import syntax

Common causes

  1. Missing 'type': 'module' declaration in package.json for Node.js projects
  2. Using CommonJS (require) configuration while trying to use ES6 imports
  3. Test runner like Jest not configured to handle ES modules
  4. Build tool (webpack, Vite, etc.) not transpiling import statements
  5. Files missing .mjs extension when explicitly needed for ES modules
  6. TypeScript tsconfig.json module setting incompatible with import syntax
  7. Script tag missing type='module' attribute in HTML

How to fix "Cannot import outside of module"

1Verify your build tool is configured for ES modules

If using Create React App, Vite, or Next.js, these already support ES modules by default. Check your build configuration:

For Create React App:

bash
npm start  # Should work with import statements

For Vite (modern React projects):

javascript
// vite.config.js already supports ESM
export default {
  // Configuration here
}

For Next.js:

javascript
// import statements work by default in pages and components
import React from 'react';
2For Node.js scripts, add 'type: module' to package.json

If running Node.js scripts directly (not in a browser), add the module type:

json
{
  "name": "my-app",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "start": "node index.js"
  }
}

Or rename your file to use .mjs extension:

bash
mv index.js index.mjs
node index.mjs  # Now import statements work
3If using Jest for testing, configure it to handle ES modules

Update your Jest configuration to transform imports:

javascript
// jest.config.js
export default {
  transform: {
    '^.+\\.jsx?$': 'babel-jest',
  },
  testEnvironment: 'jsdom',
};

Or use Node with experimental ESM support:

bash
node --experimental-vm-modules node_modules/jest/bin/jest.js
4Fix TypeScript module configuration

If using TypeScript, update tsconfig.json to use modern module system:

json
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "lib": ["ES2020", "DOM"]
  }
}
5For browser scripts, add type='module' attribute

If importing in an HTML file, mark scripts as modules:

html
<!-- Correctly marks file as module -->
<script type="module" src="app.js"></script>

<!-- In app.js, imports now work -->
import React from 'react';
import { useState } from 'react';
6Avoid mixing CommonJS and ES modules

Don't mix import and require in the same project:

javascript
// ❌ Bad: mixing both styles
const React = require('react');  // CommonJS
import { useState } from 'react';  // ES Module

// ✅ Good: use consistent style
import React from 'react';
import { useState } from 'react';

If a dependency only supports CommonJS, use dynamic imports:

javascript
// ✅ Works in ES modules
const myModule = await import('commonjs-module');

Advanced notes

JavaScript has two module systems. CommonJS (require/module.exports) was designed for server-side Node.js and uses synchronous loading. ES Modules (import/export) are the modern standard, used in browsers and modern Node.js, and support both synchronous and asynchronous loading.

In ES modules, you can use await at the top level of a file without wrapping in an async function. This is not possible in CommonJS.

Modern bundlers automatically detect your module system. Create React App, Next.js, and Vite all handle this configuration automatically, so this error is rare when using these tools. It's more common when writing Node.js scripts or configuring build tools manually.

Frequently asked questions

What does "SyntaxError" mean?
This error occurs when JavaScript encounters an import statement outside of a valid ES module context. React applications use ES6 module syntax (import/export), but they must run in an environment that understands modules. js runtime, or browser doesn't recognize the file as a module, or when trying to import in a CommonJS context.
How do I fix "SyntaxError"?
This error occurs when import statements are used outside of valid ES module contexts, often caused by mismatched module systems (ESM vs CommonJS) or files not marked as modules. Fix by configuring your build tool or package.json to properly support ES modules.
What causes "SyntaxError"?
Missing 'type': 'module' declaration in package.json for Node.js projects Using CommonJS (require) configuration while trying to use ES6 imports Test runner like Jest not configured to handle ES modules
Is the "SyntaxError" error serious?
It is a medium-severity error — more of a blocker than a risk. The steps above resolve it.

Official resources & further reading