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

First, examine your tsconfig.json file to see the current module and target values:

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

Look for these lines in your configuration. The error specifically mentions the combination of 'module: esnext' with 'target: es3' or 'target: es5'.

You can also check from the command line:

# Show effective TypeScript configuration
npx tsc --showConfig

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

The simplest fix is to upgrade your target to a modern ECMAScript version that supports ES modules:

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

Recommended targets:
- ES2015 (ES6): Minimum for ES module support
- ES2017: Good balance of compatibility and modern features
- ES2020: Modern JavaScript with latest features
- ESNext: Latest ECMAScript features (experimental)

Consider your deployment environment:
- Node.js: Check your Node version compatibility
- Browsers: Use a bundler (webpack, Vite) that transpiles for browser support
- Legacy browsers: You'll need a bundler with polyfills regardless

After updating, test the compilation:

npx tsc --noEmit
# or
npm run build

If you must target ES3/ES5 (for legacy browser support), change the module system to a compatible format:

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

Compatible module formats for ES3/ES5:
- commonjs: Node.js-style modules (require/exports)
- umd: Universal Module Definition (works in browsers and Node.js)
- amd: Asynchronous Module Definition (RequireJS)
- system: SystemJS module loader
- none: No module system (global scope)

Most common choice for ES5 targets:

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

Note: With 'commonjs', you'll use require() syntax in output, but can still write import/export in TypeScript.

If you're using tsconfig inheritance or multiple configuration files, check all relevant files:

// 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!
  }
}

Common patterns to check:
1. Extends chains: Follow the inheritance chain
2. Project references: Check referenced project configurations
3. Build tools: Webpack, Vite, etc. may generate tsconfig
4. IDE settings: VS Code workspace settings can affect compilation

To see the final merged configuration:

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

Create a minimal tsconfig.json to isolate the issue:

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

Test with this minimal config:

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

If this works, gradually add back your other compiler options to find which combination causes the error.

Common problematic options to check:
- moduleResolution: Should match your module system
- lib: Library files for your target
- esModuleInterop: Important for module compatibility
- allowSyntheticDefaultImports: Affects import behavior

Ensure your build tools support your TypeScript configuration:

# 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

Check package.json scripts:

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

Run a clean build:

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

# Reinstall dependencies
npm install

# Test compilation
npm run check

If using a framework (React, Angular, Vue), check their TypeScript requirements.