@lilith/typescript-config-react

TypeScript configuration for React applications with JSX support.

Features

• React JSX Transform: Modern react-jsx transform
• DOM Types: Full browser API types
• Bundler Resolution: Vite/webpack compatible
• Composite Mode: Monorepo support
• Extends Base: Inherits strict settings from base config

Installation

pnpm add -D @lilith/typescript-config-react @lilith/typescript-config-base typescript

Usage

Create a tsconfig.json in your React project:

{
  "extends": "@lilith/typescript-config-react",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

Configuration

Extends Base Config

This configuration extends @lilith/typescript-config-base and adds React-specific settings.

Library Settings

Option	Value	Description
lib	["ES2022", "DOM", "DOM.Iterable"]	Browser + ES2022 types

Module Settings

Option	Value	Description
module	ESNext	ESM modules
moduleResolution	bundler	Bundler-style resolution

JSX Settings

Option	Value	Description
jsx	react-jsx	React 17+ JSX transform

Output Settings

Option	Value	Description
noEmit	true	Bundler handles emit
composite	true	Project references
isolatedModules	true	Bundler compatibility

Examples

Vite + React App

{
  "extends": "@lilith/typescript-config-react",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*", "vite.config.ts"],
  "exclude": ["node_modules"]
}

With Path Aliases

{
  "extends": "@lilith/typescript-config-react",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@components/*": ["src/components/*"],
      "@hooks/*": ["src/hooks/*"],
      "@utils/*": ["src/utils/*"],
      "@styles/*": ["src/styles/*"]
    }
  },
  "include": ["src/**/*"]
}

Monorepo App

{
  "extends": "@lilith/typescript-config-react",
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*"],
  "references": [
    { "path": "../../packages/ui" },
    { "path": "../../packages/shared" }
  ]
}

With Vitest

{
  "extends": "@lilith/typescript-config-react",
  "compilerOptions": {
    "types": ["vitest/globals"]
  },
  "include": ["src/**/*", "tests/**/*"]
}

Next.js App

{
  "extends": "@lilith/typescript-config-react",
  "compilerOptions": {
    "plugins": [{ "name": "next" }],
    "incremental": true
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

Why These Settings?

react-jsx Transform

Uses the modern JSX transform (React 17+) which doesn't require importing React in every file.

Bundler Module Resolution

Matches how bundlers like Vite and webpack resolve modules, supporting package.json exports and other modern features.

noEmit

React apps typically use a bundler (Vite, webpack, etc.) that handles transpilation. TypeScript is only used for type checking.

DOM Types

Includes full browser API types for working with the DOM.

Composite Mode

Enables project references for monorepo setups where React apps depend on shared packages.

License

MIT