esbuild "Build failed with N errors" in Vite - Fix in CI
esbuild (used by Vite for dependency pre-bundling and by tools like tsup) collects every transform/resolve failure and ends with a single "Build failed with N errors" summary. The summary is not the cause - the enumerated errors above it are.
What this error means
A Vite or esbuild-driven build ends with Build failed with N errors: followed by N file/line entries. Each entry is a distinct parse, resolve, or transform failure that must be fixed.
✘ [ERROR] Expected ">" but found "className"
src/components/Card.tsx:14:8:
14 │ return <div className="card">
╵ ~~~~~~~~~
✘ [ERROR] Could not resolve "./missing"
src/index.ts:2:19:
Build failed with 2 errorsCommon causes
Syntax esbuild cannot parse
JSX in a .ts file (instead of .tsx), or a genuine syntax error, makes esbuild's loader throw. Each such file becomes one of the N errors.
Unresolved imports during pre-bundle
A Could not resolve "<path>" for a missing file or uninstalled dependency adds to the error count during dependency optimization.
How to fix it
Fix each enumerated error
- Read every
✘ [ERROR]entry above the summary - each names a file, line, and cause. - Put JSX in
.tsx/.jsxso esbuild uses the JSX loader. - Install missing deps and correct unresolved import paths.
Set the loader for non-standard extensions
If a custom extension contains JSX/TS, tell esbuild which loader to use.
// vite.config.ts
export default defineConfig({
esbuild: { loader: 'tsx', include: /src\/.*\.[jt]sx?$/ },
})How to prevent it
- Use
.tsx/.jsxextensions for files containing JSX. - Run the production build in CI so all N errors surface together.
- Keep imports pointing at installed deps and real files.