EC
TS1476
TypeScriptERRORNotableSyntaxHIGH confidence

"auto": Treat files with imports, exports, import.meta, jsx (with jsx: react-...

Production Risk

Build will fail; resolve before shipping.

What this means

A syntax error (TS1476): "auto": Treat files with imports, exports, import.meta, jsx (with jsx: react-jsx), or esm format (with module: node16+) as modules.. This diagnostic is emitted by the TypeScript compiler when "auto": Treat files with imports, exports, import.meta, jsx (with jsx: react-jsx), or esm format (with module: node16+) as modules..

Why it happens
  1. 1JSX syntax used without enabling '--jsx' compiler option
  2. 2Missing React or JSX runtime import
How to reproduce

TypeScript compiler reports TS1476 during type checking.

trigger — this will error
trigger — this will error
// Triggers TS1476
// "auto": Treat files with imports, exports, import.meta, jsx (with jsx: react-jsx), or esm format (with module: node16+) as modules.

expected output

error TS1476: "auto": Treat files with imports, exports, import.meta, jsx (with jsx: react-jsx), or esm format (with module: node16+) as modules.

Fix

Enable JSX in tsconfig.json

WHEN Using JSX syntax in TypeScript files

Enable JSX in tsconfig.json
// tsconfig.json
{
  "compilerOptions": {
    "jsx": "react-jsx"  // or "react", "preserve", etc.
  }
}

Why this works

The '--jsx' option tells TypeScript how to transform JSX; choose 'react-jsx' for React 17+ or 'react' for older versions.

Sources
Official documentation ↗

TypeScript Compiler Diagnostics

Content generated with AI assistance and reviewed for accuracy. Found an error? hello@errcodes.dev

← All TypeScript errors