Vite "Failed to resolve import" - Fix Import Resolution in CI

Vite could not find the module an import points at. As with Webpack's "Can't resolve", the cause is a missing package, a wrong or miscased path, or an alias Vite was never told about.

What this error means

The dev server or vite build errors with Failed to resolve import "<module>" from "<file>". Does the file exist? It is deterministic and points at the exact import.

vite output

[vite]: Internal server error: Failed to resolve import "./utils/forrmat" from "src/App.tsx".
Does the file exist?
  Plugin: vite:import-analysis
  File: /app/src/App.tsx

Common causes

Missing dependency or wrong path

The package is not installed, or the relative path is wrong (typo, wrong depth, missing extension where Vite expects one for non-JS).

Case-sensitivity on the runner

Linux CI is case-sensitive. ./Utils/format resolves on macOS but fails on the runner if the directory is actually utils.

Alias not configured

A @/ style alias used in source is not declared in resolve.alias (and mirrored from tsconfig paths), so Vite cannot map it.

How to fix it

Install the package and check the path/case

Terminal

npm install <package>
ls -la src/utils/format.ts   # exact case must match the import

Declare aliases in vite.config

Add resolve aliases (and keep them in sync with tsconfig paths).

vite.config.ts

// vite.config.ts
import { fileURLToPath, URL } from 'node:url'
export default defineConfig({
  resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) } },
})

How to prevent it

Commit a lockfile and install with npm ci for reproducible deps.
Match import casing to filenames; Linux runners are case-sensitive.
Generate Vite aliases from tsconfig paths to avoid drift.