Failed to resolve import

Vite couldn’t find the file or package an import points to, so it can’t serve or build the page until the import matches something real.

Browser overlay and terminal
[plugin:vite:import-analysis] Failed to resolve import "./components/Header" from "src/App.tsx". Does the file exist?

Also appears as

  • [vite] Internal server error: Failed to resolve import "./components/Header" from "src/App.tsx". Does the file exist?
  • The following dependencies are imported but could not be resolved: lucide-react (imported by /Users/me/my-app/src/App.tsx) Are they installed?
  • [vite]: Rolldown failed to resolve import "lucide-react" from "/vercel/path0/src/App.tsx". This is most likely unintended because it can break your application at runtime.
  • [vite]: Rollup failed to resolve import "lucide-react" from "/vercel/path0/src/App.tsx". This is most likely unintended because it can break your application at runtime.

Prompt to fix it

Vite shows "Failed to resolve import" with an import path and the file that imports it. Check whether that path points to a real file or an installed package. For a project file, find the correct file and fix the import, matching letter case exactly because the deploy server is case-sensitive. For a package, add it to package.json with npm install. For @/ imports, make sure vite.config.ts has an alias that matches the paths entry in tsconfig.json. Don’t delete the import or stub out the component to hide the error.

Paste into Layerwise or any AI coding tool.

What it means

Vite reads each file’s imports before it sends the file to the browser. This message means an import in src/App.tsx points at a path with no file behind it. Vite shows it as a full-screen overlay in the browser and repeats it in the terminal. The first quoted path is what it looked for, and the second is the file that asked.

Two kinds of names fail differently. A relative path like ./components/Header must match a real file, and Vite tries the usual file extensions, such as .tsx and .ts, for you. A bare name like lucide-react must be an installed package. When a package is missing, Vite may list it under “The following dependencies are imported but could not be resolved” instead.

The @/ shortcut is the usual trap. TypeScript reads paths in tsconfig.json, but Vite needs its own alias in vite.config.ts, so your editor finds @/components/ui/button while Vite doesn’t. If it works locally and fails on Vercel or Netlify, check letter case: Linux build servers treat Button.tsx and button.tsx as different files.

Common causes

  • The file was renamed, moved, or never written, so the import points at a path that doesn’t exist.
  • The package isn’t installed: it’s missing from package.json, or npm install hasn’t run since it was added.
  • The @/ alias exists in tsconfig.json but not in vite.config.ts.
  • The import’s letter case differs from the file name, which fails only on case-sensitive Linux build servers.

How to fix it

  1. Read the two paths in the message: the import Vite looked for and the file that contains it.
  2. For a relative path, open the folder and compare the file name letter by letter, including case. Fix the import, or create the missing file.
  3. For a package name, run npm install <name>, then restart npm run dev so Vite scans dependencies again.
  4. For @/ imports, add a matching resolve.alias entry in vite.config.ts. Recent Vite versions can read tsconfig.json paths instead with resolve.tsconfigPaths: true.
  5. Rename files with git mv when only the letter case changes, so the build server gets the new name.

Example fix

import { fileURLToPath, URL } from 'node:url';
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [react()],
  resolve: {
    // Vite ignores tsconfig.json paths by default, so mirror "@/*" here.
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
});

Related errors

All errors
./src/app/page.tsx:2:1 Module not found: Can't resolve '@/components/Header'

Module not found: Can't resolve

The bundler followed an import to a file or package that doesn’t exist under that name, so it couldn’t build the page.

Error: Cannot find module 'express' Require stack: - /Users/me/my-app/server.js

Cannot find module

Node tried to load a package or file that isn’t where the code says it is, usually because it was never installed or the path is wrong.

Error: Command "npm run build" exited with 1

Command "npm run build" exited with 1

Your build script failed on the host. This line only reports the failure; the actual error is printed earlier in the build log.

src/App.tsx:3:20 - error TS2307: Cannot find module '@/components/Header' or its corresponding type declarations.

Cannot find module or its corresponding type declarations

TypeScript couldn’t match an import to a file or package it understands, so the build fails even when the app runs fine in the browser.

Build with an agent that checks its work

The Layerwise agent clicks through the live preview and reads the console, so it catches errors before you do.

DownloadRead the docs