Fix: Vite “Failed to resolve import” for @ alias imports

[vite] Internal server error: Failed to resolve import "@/utils/hello"
from "src/main.js". Does the file exist?

Error: [vite]: Rolldown failed to resolve import "@/utils/hello" from ".../src/main.js"

The fix

@/ isn’t a real path. It’s an alias you have to define in vite.config.js (or .ts):

import { defineConfig } from "vite";
import { fileURLToPath } from "node:url";

export default defineConfig({
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});

Using TypeScript? Keep the matching paths in tsconfig.json too. That entry is only for your editor and type checker, as the next section shows.

What didn’t work

Same error, different wording

• Dev server (vite): Failed to resolve import "…" from "…". Does the file exist?, shown in the terminal and as a red overlay in the browser.
• Build in Vite 8: Rolldown failed to resolve import. Vite 8 bundles with Rolldown, so older answers that say “Rollup failed to resolve import” are describing the same problem.
• A typo in a relative path (./utils/helo) gives a different build message: [UNRESOLVED_IMPORT] Could not resolve './utils/helo'. Check the spelling and extension.

Why it happens

Vite resolves bare paths through node_modules and relative paths from the importing file. @/... is neither, so without an alias Vite looks for a package literally named @/utils. It fails, and your app never loads.