← ClaudeAtlas

vitelisted

Configure and optimize Vite 7 for React projects. Covers build tooling, dev server, plugins, HMR, chunk splitting, Environment API, and Rolldown integration. Use when setting up Vite, configuring builds, optimizing bundles, managing plugins, or troubleshooting dev server. Triggers on vite, vite config, vite plugin, HMR, dev server, build optimization, chunk splitting, rolldown, vite proxy, environment api, rolldown-vite.
tenequm/skills · ★ 28 · AI & Automation · score 85
Install: claude install-skill tenequm/skills
# Vite 7 Build tooling and dev server for React projects. Vite 7 (June 2025) is ESM-only, requires Node.js 20.19+ / 22.12+, and defaults browser target to `baseline-widely-available`. The user's stack uses `rolldown-vite` (Rust-based drop-in replacement), `@vitejs/plugin-react`, `@tailwindcss/vite`, `@tanstack/router-plugin`, `@cloudflare/vite-plugin`, and `@tanstack/react-start`. ## Critical Rules ### Plugin Order Matters TanStack Start or TanStack Router plugin MUST come before `@vitejs/plugin-react`: ```ts plugins: [ tanstackStart(), // or tanstackRouter() for SPA tailwindcss(), react(), // ALWAYS last among framework plugins ] ``` Wrong order causes route generation failures and HMR breakage. ### Vite 7 is ESM-Only Vite 7 distributes as ESM only. Your `vite.config.ts` must use `import`/`export` syntax. CJS `require()` is not supported in config files. Node.js 20.19+ supports `require(esm)` natively, so Vite can still be required by CJS consumers. ### No `tailwind.config.js` Tailwind CSS v4 uses CSS-first configuration. Never create `tailwind.config.js`/`tailwind.config.ts`. Use `@tailwindcss/vite` plugin and configure in CSS via `@theme`, `@utility`, `@plugin`. ### Environment Variables Need VITE_ Prefix Only variables prefixed with `VITE_` are exposed to client code via `import.meta.env`. Server-only secrets must NOT use this prefix. For type safety, augment `ImportMetaEnv` in `vite-env.d.ts`. ### splitVendorChunkPlugin Is Removed Re