How to fix Option 'module' cannot be set to 'esnext' when 'target' is 'es3' or 'es5' in TypeScript

What this error means

The "Option 'module' cannot be set to 'esnext' when 'target' is 'es3' or 'es5'" error appears when there's an incompatibility between your TypeScript compiler settings in tsconfig.json. The `module` option controls how TypeScript generates module code (import/export statements), while the `target` option determines which ECMAScript version your code compiles to. The 'esnext' module system uses modern JavaScript module syntax that requires features only available in ES2015 (ES6) and later. ES3 (1999) and ES5 (2009) are legacy JavaScript versions that don't support: - ES modules (`import`/`export` syntax) - Arrow functions (used in some module transformations) - Modern class syntax - Other ES6+ features that TypeScript's 'esnext' module output may rely on TypeScript prevents this combination because the generated code would be invalid JavaScript for your target environment. You need to either: 1. Upgrade your `target` to ES2015 or later to use modern module systems 2. Change your `module` to a format compatible with ES3/ES5 (like 'commonjs' or 'umd')

Typical symptoms

• TypeScript compilation fails with the exact error message
• Build process (tsc, webpack, etc.) stops with this configuration error
• IDE/editor shows red squiggles in tsconfig.json file
• Error appears immediately after modifying tsconfig.json
• Project fails to compile even though code syntax is correct
• CI/CD pipeline fails during TypeScript compilation step

Common causes

1. Setting 'module' to 'esnext' while 'target' is 'es3' or 'es5' in tsconfig.json
2. Inheriting tsconfig settings from a base configuration with incompatible values
3. Using a template or starter project with mismatched compiler options
4. Accidentally downgrading 'target' while keeping 'module' as 'esnext'
5. Copy-pasting tsconfig.json from a modern project into a legacy one
6. Using tools that auto-generate tsconfig.json with incompatible defaults
7. Migrating from JavaScript to TypeScript without updating compiler options

How to fix "Option 'module' cannot be set to 'esnext' when 'target' is 'es3' or 'es5'"

// tsconfig.json
{
  "compilerOptions": {
    "module": "esnext",      // ← This is the problem
    "target": "es5",         // ← Incompatible with esnext
    // ... other options
  }
}

# Show effective TypeScript configuration
npx tsc --showConfig

# Or check specific files
cat tsconfig.json | grep -E "(module|target)"

{
  "compilerOptions": {
    "module": "esnext",
    "target": "es2015",      // ← Changed from es5 to es2015
    "lib": ["es2015", "dom"],
    // ... other options
  }
}

npx tsc --noEmit
# or
npm run build

{
  "compilerOptions": {
    "module": "commonjs",    // ← Changed from esnext to commonjs
    "target": "es5",
    // ... other options
  }
}

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "lib": ["es5", "dom"],
    "esModuleInterop": true,  // Important for CommonJS/ES module interop
    "allowSyntheticDefaultImports": true
  }
}

// tsconfig.base.json (parent config)
{
  "compilerOptions": {
    "module": "esnext",
    "target": "es2015"
  }
}

// tsconfig.json (extends base)
{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "target": "es5"  // ← Overrides to incompatible value!
  }
}

npx tsc --showConfig > tsconfig.effective.json
cat tsconfig.effective.json | grep -A2 -B2 "module|target"

// tsconfig.minimal.json
{
  "compilerOptions": {
    "module": "esnext",
    "target": "es2015"
  },
  "include": ["src/**/*"]
}

npx tsc --project tsconfig.minimal.json --noEmit

# Update TypeScript
npm install --save-dev typescript@latest

# Update related tools
npm install --save-dev @types/node ts-node

# For webpack users
npm install --save-dev ts-loader webpack webpack-cli

# For Vite users
npm install --save-dev vite @vitejs/plugin-react

{
  "scripts": {
    "build": "tsc",
    "dev": "tsc --watch",
    "check": "tsc --noEmit"
  }
}

# Clear build artifacts
rm -rf dist build node_modules/.cache

# Reinstall dependencies
npm install

# Test compilation
npm run check

Advanced notes

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "downlevelIteration": true,
    "lib": ["es5", "dom", "es2015.promise"]
  }
}

{
  "module": "esnext",
  "moduleResolution": "bundler",
  "target": "es2020"
}

# Check Node.js version
node --version

# Check browser support via caniuse.com or MDN
# ES modules: https://caniuse.com/es6-module
# Dynamic import: https://caniuse.com/es6-module-dynamic-import

npx tsc --extendedDiagnostics
npx tsc --listFiles
npx tsc --traceResolution

Frequently asked questions

What does "Option 'module' cannot be set to 'esnext' when 'target' is 'es3' or 'e" mean?

json. The module option controls how TypeScript generates module code (import/export statements), while the target option determines which ECMAScript version your code compiles to. The 'esnext' module system uses modern JavaScript module syntax that requires features only available in ES2015 (ES6) and later.

How do I fix "Option 'module' cannot be set to 'esnext' when 'target' is 'es3' or 'e"?

This TypeScript configuration error occurs when you try to use the modern 'esnext' module system with legacy JavaScript targets (ES3 or ES5). The esnext module format requires modern JavaScript features that aren't available in older ECMAScript versions. To fix this, either upgrade your target to ES2015+ or switch to a compatible module system like CommonJS.

What causes "Option 'module' cannot be set to 'esnext' when 'target' is 'es3' or 'e"?

Setting 'module' to 'esnext' while 'target' is 'es3' or 'es5' in tsconfig.json Inheriting tsconfig settings from a base configuration with incompatible values Using a template or starter project with mismatched compiler options

Is the "Option 'module' cannot be set to 'esnext' when 'target' is 'es3' or 'e" error serious?

It is a medium-severity error — more of a blocker than a risk. The steps above resolve it.

Related errors

• Module has no default export

  How to fix "Module has no default export" in TypeScript

  LOW

• Module augmentation requires 'declare module' syntax

  How to fix "Module augmentation requires 'declare module' syntax" in TypeScript

  MEDIUM

• Module 'X' does not have a default export

  How to fix "Module 'X' does not have a default export" in TypeScript

  MEDIUM

• Cannot use module augmentation with import assignment

  How to fix "Cannot use module augmentation with import assignment" in TypeScript

  MEDIUM

• Cannot find name 'process'. Do you need to install type definitions for node? Try `npm i --save-dev @types/node` and then add 'node' to the types field in your tsconfig.

  How to fix "Cannot find name 'process'" in TypeScript

  MEDIUM

• Module has no exported member 'X'

  How to fix 'Module has no exported member X' error in TypeScript

  MEDIUM

Official resources & further reading

• 📚TypeScript Official Documentation
• 📖
  TypeScript TSConfig - module(Official Docs)
• 📖
  TypeScript TSConfig - target(Official Docs)
• 📖
  TypeScript Handbook - Modules(Official Docs)
• TypeScript - Compiler Options
• Stack Overflow - TypeScript module esnext target es5
• 🐙
  GitHub - TypeScript module/target compatibility issues(GitHub)
• TypeScript Blog - Module es2022 and beyond
• Total TypeScript - TSConfig Cheat Sheet