Vite "Pre-transform error" - Fix Plugin/Transform Failures in CI

Vite pre-transforms modules ahead of time, and one of those transforms threw. The wrapper says "Pre-transform error"; the real cause - a syntax error, a missing plugin, or a transform that does not match the file type - is in the lines beneath it.

What this error means

Vite logs Pre-transform error: followed by a specific failure (a parse error, a plugin throwing, an esbuild transform error). The build or dev server reports the module and the underlying error.

vite output

Pre-transform error: Transform failed with 1 error:
/app/src/components/Card.tsx:14:2: ERROR: Expected ">" but found "className"
  Plugin: vite:esbuild
  File: /app/src/components/Card.tsx

Common causes

Syntax esbuild cannot parse

Vite's esbuild transform expects the file to match its loader. JSX in a .ts file (instead of .tsx), or a real syntax error, makes the transform throw.

A plugin transform misconfigured or failing

A Vite/Rollup plugin in the transform chain (e.g. a SVGR, MDX, or framework plugin) errors on a file it was not configured to handle, or is incompatible with the installed Vite version.

How to fix it

Fix the underlying syntax/loader

Read the error beneath "Pre-transform error" - it names the file, line, and real cause.
Put JSX in .tsx/.jsx files so esbuild uses the JSX loader.
Correct the actual syntax error the transform reports.

Align plugins with the Vite version

Ensure each plugin supports your Vite major and is ordered/configured correctly.

Terminal

npm ls vite
# upgrade a stale plugin to its Vite-compatible release
npm install @vitejs/plugin-react@latest

How to prevent it

Use .tsx/.jsx extensions for files containing JSX.
Keep Vite and its plugins on compatible versions.
Run vite build in CI so transform errors surface before deploy.