How To Fix The Error 'Cannot use import statement outside a module' In React

Fixing the “cannot use import statement outside a module jest” error requires proper Jest and Babel or ts-jest setup. This guide walks through configurations, file handling, and module alignment so your tests run without syntax errors.

"cannot use import statement outside a module jest" — if this error pops up during testing, it can stop everything in its tracks. It’s usually not your syntax at fault, but a mismatch between ES modules in your code and how Jest processes them. This guide explains why it happens and how to fix it in JavaScript, TypeScript, and popular frameworks.

What Causes the “cannot use import statement outside a module jest” Error?

This error reflects a mismatch between your code’s use of import statements and how Jest interprets modules. Jest defaults to CommonJS. You have valid JS modules using ES modules, but Jest sees them as plain JavaScript. That mismatch triggers “syntaxerror: cannot use import” or “unexpected token”. You use create-react-app or plain js setups that rely on import statements, yet the jest config doesn’t allow them in JS files outside a module.

Details:

• JS source uses ECMAScript modules (import, export default) in JS files.
• Jest, by default, treats code as CommonJS, not recognizing import statements.
• So, you run a test suite, but you encounter an unexpected token, Jest fails, or you get a syntax error: "Cannot use import statement outside a module."
• That same error appears repeatedly until you adjust the Babel configuration or set "type": "module" in package.json.

This error usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript. By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules". — Check out the full discussion on GitHub

Here’s a Mermaid chart showing the potential reasons for the "cannot use import statement outside a module" error in Jest:

Aligning Modules, Babel, and Jest

You need module alignment to ensure the import works correctly. That means telling Jest how to handle import statements, ECMAScript modules, custom transformations, file extensions, binary assets, non-JS modules, and TS files if used.

First, introduce proper or .

Setting Up Babel Config for ES Modules

This part requires you to allow to use statement outside modules. Use a babel configuration:

1. Create or .
2. Add babel preset env with "modules": , or for Node.
3. For ts files, include .
4. supports out of the box if config exists.

Example :

This ensures Jest sees valid JS and transpiles ECMAScript modules. Without this, tests fail with a syntax error because they cannot use import outside a module.

Modify Jest Config to Use Babel

Then set up :

That box Jest supports Babel kicks in. Now import statements work fine. Without this transform, you’ll run into the same error when running Jest, unable to parse import statements. The babel jest transform compiles modules to CommonJS before Jest loads them.

Using ts-jest for TypeScript Projects

If you use TypeScript, offers custom transformations tailored for files.

ts-jest Setup with Jest

Install dependencies:

Create :

This setup handles import statements inside files, transforms code to valid , and ensures the test suite works. Without or proper babel config, import statements in files will trigger “cannot use import statement outside a module jest” error message—the same error repeats until you add .

Why “cannot use import statement outside a module jest” Still Happens

Even with , you may face the error. Causes include:

• Using extension for ES modules in TypeScript code.
• Not marking files as modules in (use "module": "ESNext").
• Not configuring babel or to transform non-JS modules (e.g., JSON or binary assets).
• Using or React DOM mismatches in transform pipelines without proper mapping.

Handling File Extensions and Non-JS Modules

Jest needs to know how to handle files, files, and other resources like CSS, images, or binary assets. Without config, you get “unexpected token jest failed” when importing such files. That’s because your code uses import statements for non-JS modules, which Jest doesn’t process.

Configuring moduleNameMapper and transformIgnorePatterns

In , extend:

Here, helps Jest mock styles. A returns a placeholder for images or binary assets. Without this, tests blow up due to import statements in non-JS modules.

Bringing It Together: A Full Example

This setup allows import statement usage across modules, files, React DOM imports, and even assets. No more error: “cannot use import statement outside a module jest”.

Streamline your development workflow by automating repetitive tasks with Rocket.new. Start building smarter projects faster.

Build your app now!

Why You Might Still See the Same Error

Even with configuration, the same error may appear due to:

• Missing "type": "module" in when using ESM without Babel.
• Not naming files with a extension when using ES modules without transforms.
• Not updating after migrating from CommonJS, requiring require statements.
• A missing Babel preset environment or an incomplete Babel configuration.
• Misconfigured transform patterns are preventing files from being handled.

If Jest sees an import statement outside a module—with no transformation—it throws that error.

How to Use Import Statement in TypeScript with Jest

Import statements work properly when:

1. or Babel transforms your files to valid .
2. sets "module": "ESNext", "target": "ES2018", and includes "allowJs": true.
3. Your uses transform with babel-jest or for both and .

That alignment ensures import statement outside a module jest errors disappear.

Mixing import and require in Node.js

It’s possible to mix import and require in the same project—but only where supported.

• In modules inside files, import works if your runtime or transform supports it.
• You can use require in CommonJS parts.
• Jest transform allows import statements to work even if your codebase mixes usage.
• But avoid mixing in the same file; that triggers parse errors.

This hybrid style may cause unexpected token jest failed errors if the config doesn’t unify syntax.

How to Import a CommonJS Module in an ES Module

If you want to import require-based modules using import:

Transformed by Babel or , this works fine. Jest sees valid js. Without transform, Jest throws “cannot use import statement outside a module jest error”.

Handling Create React App Projects

Create React App (CRA) already supports ES modules with Babel. But Jest inside CRA sometimes encounters files outside the src.

• If you import a module from outside, Jest may encounter import statements it can’t transform because of missing Babel config.
• You need to customize your CRA jest config using react-scripts overrides or by ejecting.
• Without adjusting, your test suite failed with the same error.

When box jest supports Babel inside CRA, you still need to adjust file extensions, moduleNameMapper, and transform for assets.

Common Patterns That Lead to the Error

By addressing each scenario, you avoid “cannot use import statement outside a module jest” pain points.

How to Resolve "unexpected token jest failed" and "syntaxerror cannot use import"

1. Add babel config with babel preset env, babel-jest, ts-jest as needed.
2. Include files transformed by babel or —update transform patterns.
3. Handle assets via moduleNameMapper (identity obj proxy and file mocks).
4. Use appropriate file extensions: , , , , when needed.
5. Set "type": "module" if working directly with ES modules without transforms.
6. Ensure the same error isn’t masked by other config option mistakes.

Example Folder and Files

• uses import and export default.
• imports add using import statements.
• has presets including babel preset env.
• uses or .
• returns a placeholder default export for imported assets.

When you run npm test, Jest transforms ts files, handles imports, and runs tests without “cannot use import statement outside a module jest” or “unexpected token jest failed”.

Final Thoughts on “cannot use import statement outside a module jest”

You now see how mismatched module formats lead to the “cannot use import statement outside a module jest” error. You understand how babel config, , and proper transform patterns resolve it. You learned about file extensions, moduleNameMapper, and mixing import with require.

This error highlights how module systems and test runners misunderstand each other without proper configuration. You worked through aligning import statements, configuring Babel or , and handling assets. That insight gives you a stronger foundation for maintaining test suites in modern JavaScript environments. Feel free to revisit steps if tests fail, and know that once transforms properly align, your tests will run without breaking on import statements.

You can now:

• Confirm your Jest config properly transforms and modules.
• Add with babel preset env, including ESM and support.
• Include to handle non-js modules like CSS or binary assets using identity obj proxy.
• Understand the importance of file extensions and "type": "module" in .

Try running your test suite after applying these steps. You should no longer hit “statement outside a module”, “unexpected token jest failed”, or “syntaxerror cannot use import’. Fixes revolve around consistent module handling, config options, and ensuring that all files are transformed.

module.exports = {
  presets: [
    ["@babel/preset-env", { targets: { node: "current" }, modules: "auto" }],
    "@babel/preset-typescript"
  ],
};

module.exports = {
  transform: {
    "^.+\\.(js|jsx|ts|tsx)$": "babel-jest"
  },
  moduleFileExtensions: ["js", "jsx", "ts", "tsx", "json", "node"],
};

module.exports = {
  preset: "ts-jest",
  testEnvironment: "node",
  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
  transform: {
    "^.+\\.(ts|tsx)$": "ts-jest"
  },
};

module.exports = {
  // existing config...
  moduleNameMapper: {
    "\\.(css|less|scss)$": "identity-obj-proxy",
    "\\.(png|jpg|svg)$": "<rootDir>/__mocks__/fileMock.js"
  },
  transform: {
    "^.+\\.(js|jsx|ts|tsx)$": "babel-jest"
  },
};

// jest.config.js
module.exports = {
  transform: {
    "^.+\\.(js|jsx|ts|tsx)$": "babel-jest"
  },
  moduleFileExtensions: ["js", "jsx", "ts", "tsx", "json", "node"],
  moduleNameMapper: {
    "\\.(css|scss)$": "identity-obj-proxy",
    "\\.(png|jpg|svg)$": "<rootDir>/__mocks__/fileMock.js"
  },
  testEnvironment: "jsdom",
};

// babel.config.js
module.exports = {
  presets: [
    ["@babel/preset-env", { targets: { node: "current" }, modules: "auto" }],
    "@babel/preset-typescript",
    "@babel/preset-react"
  ],
};

import pkg from 'some-cjs';
const { foo } = pkg;

npm install --save-dev ts-jest @types/jest typescript

project/
├── babel.config.js
├── jest.config.js
├── package.json
├── src/
│   ├── add.ts
│   └── add.test.ts
└── __mocks__/
    └── fileMock.js