How to fix 'jsx' option requires a value in TypeScript

Open your tsconfig.json file and ensure the jsx option has one of these valid values:

{
  "compilerOptions": {
    // For React projects (most common):
    "jsx": "react-jsx",      // React 17+ with new JSX transform (recommended)
    "jsx": "react",          // Classic React transform (pre-React 17)

    // For other use cases:
    "jsx": "preserve",       // Keep JSX for bundler to transform
    "jsx": "react-native",   // React Native projects

    // For testing/debugging:
    "jsx": "react-jsxdev"    // React 17+ with dev mode
  }
}

Recommended values:
- `"react-jsx"`: Modern React projects (React 17+)
- `"react"`: Legacy React projects (React 16 and earlier)
- `"preserve"`: When using a bundler like Vite or webpack with JSX plugins

After updating, restart your TypeScript server:
- VS Code: Press Cmd/Ctrl + Shift + P, then "TypeScript: Restart TS Server"
- Terminal: npx tsc --noEmit to test compilation

Check for syntax errors in your tsconfig.json that might prevent TypeScript from reading the jsx value:

// WRONG - missing quotes or trailing comma
{
  "compilerOptions": {
    "jsx": react-jsx,  // Missing quotes around value
    "target": "es2020", // Trailing comma (valid in JSON5 but not strict JSON)
  }
}

// CORRECT
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "target": "es2020"
  }
}

Common syntax issues to check:
1. Missing quotes around string values
2. Trailing commas in objects/arrays (invalid in strict JSON)
3. Comments (JSON doesn't support comments, use JSON5 if needed)
4. Missing braces or brackets
5. Incorrect file extension (must be .json, not .js or .ts)

Validate your JSON with:

# Check JSON syntax
npx jsonlint tsconfig.json

# Or use Node.js
node -e "JSON.parse(require('fs').readFileSync('tsconfig.json', 'utf8'))" && echo "Valid JSON"

TypeScript can inherit settings from multiple configuration files. Check for:

1. Base tsconfig.json: tsconfig.base.json or tsconfig.json in parent directories
2. Extends property: Your tsconfig might extend another config:

{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "jsx": "react-jsx"  // This overrides the base config
  }
}

3. Project references: In monorepos, check referenced projects:

{
  "references": [
    { "path": "./packages/ui" },
    { "path": "./packages/utils" }
  ]
}

To debug which configuration is being used:

# Show effective configuration
npx tsc --showConfig

# Or compile with verbose output
npx tsc --extendedDiagnostics

If using extends, ensure the base config doesn't have an invalid jsx value. You can override it in your main tsconfig.json.

Some jsx values require newer TypeScript versions:

| jsx value | Minimum TypeScript | Purpose |
|-----------|-------------------|---------|
| "react-jsx" | 4.1+ | React 17+ new JSX transform |
| "react-jsxdev" | 4.1+ | React 17+ dev mode |
| "preserve" | 1.6+ | Keep JSX for bundler |
| "react" | 1.6+ | Classic React transform |
| "react-native" | 1.6+ | React Native |

Check your TypeScript version:

npx tsc --version
# or
npm list typescript

Update if needed:

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

# Or specific version
npm install --save-dev [email protected]

After updating, clear any cached TypeScript data:

# Delete TypeScript build cache
rm -rf node_modules/.cache

# Restart IDE TypeScript server
# In VS Code: Cmd/Ctrl + Shift + P → "TypeScript: Restart TS Server"

Different frameworks require different jsx settings:

React (modern):

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "lib": ["dom", "dom.iterable", "esnext"],
    "moduleResolution": "node"
  }
}

React (legacy):

{
  "compilerOptions": {
    "jsx": "react",
    "lib": ["dom", "dom.iterable", "esnext"]
  }
}

Vue with JSX:

{
  "compilerOptions": {
    "jsx": "preserve",  // Vue handles JSX transformation
    "lib": ["dom", "esnext"]
  }
}

React Native:

{
  "compilerOptions": {
    "jsx": "react-native",
    "moduleResolution": "node",
    "target": "esnext"
  }
}

Next.js (automatically configured):
Next.js handles TypeScript configuration internally. If you see this error in Next.js:
1. Check next.config.js for custom TypeScript settings
2. Ensure you're not manually overriding tsconfig.json incorrectly
3. Run npm run build to see Next.js's TypeScript diagnostics

Create a minimal tsconfig.json to isolate the issue:

// tsconfig.minimal.json
{
  "compilerOptions": {
    "jsx": "react-jsx",
    "target": "es2020",
    "module": "commonjs",
    "strict": true
  },
  "include": ["src/**/*"]
}

Test compilation:

# Compile with minimal config
npx tsc --project tsconfig.minimal.json --noEmit

# If this works, your main tsconfig has other issues
# Compare with your actual tsconfig:
npx tsc --showConfig > actual-config.json
npx tsc --project tsconfig.minimal.json --showConfig > minimal-config.json
diff actual-config.json minimal-config.json

Common differences to check:
1. Multiple jsx declarations in extended configs
2. Conflicting compiler options
3. Incorrect file inclusions/exclusions
4. Environment-specific overrides (tsconfig.production.json, etc.)

Once identified, fix the issue in your main tsconfig.json and delete the minimal test file.