Vite + React 19 + TypeScript + ESLint 9: Actually Fast Development (When It Works)

I've been running this setup for about 8 months now, and here's what actually works and what'll make you want to quit programming. React 19 finally shipped stable and it's been solid in production since I started using it.

The Good: When Everything Works

Vite is Fast as Hell - My M1 Mac boots the dev server in about a second. Compare that to the 25-second nightmare I had with Webpack. HMR actually works most of the time, updating components instantly.

React 19 Compiler is Magic - When it works, the React Compiler automatically optimizes your components. I deleted 60% of my useMemo and useCallback calls. No more thinking about memoization bullshit.

TypeScript Finally Plays Nice - React 19's improved type definitions caught 3 runtime bugs in my first week. TypeScript errors actually make sense now instead of cryptic generics hell.

The Ugly Reality Check

ESLint 9 Will Break Everything - ESLint 9 completely deprecated .eslintrc files. My existing config died instantly. Spent 4 hours migrating to flat config and still have warnings I can't figure out.

React 19 is Stable But Ecosystem Isn't - Half your favorite libraries haven't updated their peer dependencies. React Router had issues until they finally fixed it in a recent version, and don't get me started on older UI component libraries.

HMR Randomly Dies - About once an hour, HMR just stops working. The classic solution: stop the dev server, delete node_modules, and sacrifice a goat to the JavaScript gods. I learned this the hard way during a demo to the CEO. No idea why this works, but it does.

What This Stack Actually Delivers

After dealing with the setup pain, here's what you get:

• Development Speed: Noticeably faster than Webpack setups
• Fewer Runtime Bugs: TypeScript + React 19 types catch more errors
• Less Configuration: Once it's working, you don't touch the config much
• Future-Ready: All tools have active development

The Honest Assessment: Great developer experience when it works. Expect to spend a weekend debugging config issues during setup.

How I Actually Structure This Shit

Look, here's what each tool does when it's not breaking:

1. Vite - Serves files fast because it uses ES modules instead of bundling everything like Webpack
2. React 19 - Your components, but with automatic optimization so you stop writing useMemo everywhere
3. TypeScript - Yells at you before your code breaks in production (thank god)
4. ESLint 9 - Makes sure your code doesn't look like garbage (after you spend 4 hours configuring it)

They actually play nice together most of the time. Vite doesn't fight with TypeScript, React 19 works with strict mode enabled, and ESLint... well, ESLint works once you figure out the new config format. No idea why everything suddenly works together now when it didn't 6 months ago. When everything clicks, builds are stupid fast compared to Webpack setups.

What You Need First

Before you start, here's what'll fuck you over if you don't have it:

• Node 20+ (or 22 if you're feeling adventurous) - Vite 7 requires newer Node since Node 18 hit EOL
• Clean npm cache - Run npm cache clean --force if you've been messing with React betas
• No global create-react-app - Uninstall it: npm uninstall -g create-react-app

Initial Setup (The Easy Part)

The Vite React-TypeScript template is actually decent, based on the official Vite documentation and community best practices:

npm create vite@latest my-react-app -- --template react-ts
cd my-react-app
npm install

This works 90% of the time. If it fails, delete the directory and try again.

React 19 Upgrade (Where Things Get Spicy)

React 19 is currently stable. Here's how to upgrade:

npm install react@^19.1.0 react-dom@^19.1.0
npm install --save-dev @types/react@^19.1.0 @types/react-dom@^19.1.0

Here's what nobody tells you: This will break if you have conflicting peer dependencies. Run npm ls to check for version conflicts. Most UI libraries haven't caught up yet.

TypeScript Config That Won't Fight You

React 19's TypeScript support is actually good. Here's a config that works:

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "lib": ["ES2023", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,
    "strict": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true
  }
}

Why this config works: I removed the bullshit options that cause more problems than they solve. skipLibCheck is essential because half your dependencies have TypeScript errors. This config works for me. Your mileage may vary.

ESLint 9 Setup (Pain Incoming)

ESLint 9 completely killed .eslintrc files. Your existing config is dead. Here's the funeral:

npm install --save-dev eslint@^9.35.0 @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-react-hooks eslint-plugin-react-refresh

Delete your .eslintrc.js (it's worthless now) and create eslint.config.js:

import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import tseslint from 'typescript-eslint'

export default tseslint.config(
  { ignores: ['dist'] },
  {
    extends: [js.configs.recommended, ...tseslint.configs.recommended],
    files: ['**/*.{ts,tsx}'],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
    },
    plugins: {
      'react-hooks': reactHooks,
      'react-refresh': reactRefresh,
    },
    rules: {
      ...reactHooks.configs.recommended.rules,
      'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
    },
  },
)

Expect this to break your VS Code for about 10 minutes while the ESLint extension figures out the new config. Restart VS Code if it doesn't pick up the changes.

Vite Config (Keep It Simple)

Don't overcomplicate your vite.config.ts:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
})

Skip the ESLint plugin - it slows down the dev server for some reason. Let your editor handle ESLint instead. Learned this one the hard way.

Scripts I Actually Use (Copy These)

{
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint .",
    "lint:fix": "eslint . --fix",
    "preview": "vite preview"
  }
}

When Everything Breaks (Troubleshooting)

HMR stopped working? Kill the dev server and run:

rm -rf node_modules package-lock.json
npm install
npm run dev

TypeScript complaining about React types? Make sure you have matching versions:

npm list react @types/react

ESLint throwing weird errors? Delete .eslintcache and restart your editor.

Build fails with "Cannot resolve module"? Check your imports - Vite is stricter than Webpack about file extensions and case sensitivity. Fun fact: this breaks if your username has a space in it. Still haven't figured out why.

Windows WSL2 gotcha: Node modules can hit the path length limit and just... fail silently. Because Windows.

The nuclear option: Delete everything and start over. Sometimes it's faster than debugging. I've done this at least 3 times this month.