Vite build works but dev server fails — CJS vs ESM mismatch

Vite dev server throws errors about require(), module.exports, or __dirname being undefined. Dependencies that work in production build fail in development.

(1) Vite dev serves ESM natively — CJS modules need to be pre-bundled. Check that the failing dependency is in optimizeDeps.include in vite.config. (2) If a dependency uses CJS: add it to optimizeDeps.include to force pre-bundling. (3) For __dirname/__filename: use import.meta.url with fileURLToPath: const __dirname = dirname(fileURLToPath(import.meta.url)). (4) Check the dependency's package.json — does it have a 'module' or 'exports' field? Vite prefers ESM entry points. (5) For SSR: use ssr.noExternal to bundle specific dependencies. (6) Last resort: use vite-plugin-commonjs to transform CJS to ESM.

Vite uses native ESM in development (no bundling) but esbuild for production (which handles CJS). This means CJS-only packages may work in production but fail in dev without explicit pre-bundling.