How to fix Option 'allowImportingTsExtensions' can only be used when either 'noEmit' or 'emitDeclarationOnly' is set. in TypeScript

First, determine what you're actually using to run/build your code:

If you're using a bundler (Webpack, Vite, esbuild, Parcel):
Your bundler handles TypeScript transpilation, not TypeScript itself.

If you're using a TypeScript runtime (tsx, ts-node, Deno, Bun):
These runtimes execute TypeScript files directly without emitting JavaScript.

If you're using pure TypeScript compilation (tsc):
TypeScript itself emits the JavaScript files.

Understanding this helps determine the right fix.

Add or update the noEmit compiler option in your tsconfig.json:

{
  "compilerOptions": {
    "allowImportingTsExtensions": true,
    "noEmit": true
  }
}

noEmit: true tells TypeScript to skip emitting JavaScript entirely. This is appropriate when:
- You're using a bundler to handle transpilation
- You're using a TypeScript runtime (tsx, ts-node, Deno, Bun)
- You only want TypeScript for type-checking

If you need to emit declaration files (.d.ts) but not JavaScript, use:

{
  "compilerOptions": {
    "allowImportingTsExtensions": true,
    "emitDeclarationOnly": true
  }
}

This is useful for:
- Publishing a library with TypeScript definitions
- Pre-generating type definitions for your bundled code
- Type-only outputs

If you actually need to emit JavaScript files AND use .ts extensions in imports, use rewriteRelativeImportExtensions (TypeScript 5.7+):

{
  "compilerOptions": {
    "allowImportingTsExtensions": true,
    "rewriteRelativeImportExtensions": true,
    "module": "esnext",
    "moduleResolution": "bundler"
  }
}

This tells TypeScript to automatically rewrite .ts imports to .js in the emitted output, making the generated JavaScript valid for runtime execution.

Requirements:
- TypeScript 5.7+
- Must use "esnext" or compatible module format
- Use "bundler" or "node" for moduleResolution

If using a bundler, ensure it's configured to handle TypeScript:

Vite:

// vite.config.ts
export default {
  esbuild: {
    target: 'esnext'
  }
}

Webpack:

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader'
      }
    ]
  }
}

esbuild:

import * as esbuild from 'esbuild';

await esbuild.build({
  entryPoints: ['src/index.ts'],
  outdir: 'dist',
  format: 'esm'
});

Once configured, test your build:

# With noEmit enabled (type-checking only)
npx tsc --noEmit

# Or run your bundler/runtime
npm run dev
npm run build
tsx src/index.ts

The error should disappear. Your .ts imports should now work correctly.