Fixed: Vite "Failed to Resolve Import" Error in Blade Components

The problem: Running npm run dev or npm run build throws Failed to resolve import for a JS/CSS path referenced inside a Blade component, even though the file exists on disk.

Environment: Laravel 11, Vite 5, Node 20, npm 10

The Error

● ● ●  terminal

[vite] Internal server error: Failed to resolve import "../components/DropdownMenu.vue"
from "resources/js/Pages/Dashboard.vue". Does the file exist?

Plugin: vite:import-analysis
File: resources/js/Pages/Dashboard.vue

Why It Happens

This error almost always comes from one of three mismatches between what your code says and what Vite can actually see:

1. Case sensitivity. Your local machine (macOS/Windows) is case-insensitive, so dropdownMenu.vue and DropdownMenu.vue look identical to you — but the moment this deploys to a case-sensitive Linux server, or Vite's dependency pre-bundling kicks in, the mismatch surfaces.

2. A relative path built from the wrong working directory. Vite resolves relative imports based on the importing file's location, not your project root — a path that "looks right" copy-pasted from another file can be one folder off.

3. Vite's dependency cache is stale. After deleting/renaming/moving a component, Vite's optimizer (in node_modules/.vite) still references the old path until the cache is cleared.

Blade-specific twist: if the import is happening inside a component registered via @vite directives in a Blade file rather than a JS entry point, Vite may not even be watching that directory unless it's explicitly included in vite.config.js.

The Fix

First, verify the exact file path and casing on disk:

ls -la resources/js/components/

Fix the import to match the exact casing and relative path:

resources/js/Pages/Dashboard.vue

- import DropdownMenu from '../components/DropdownMenu.vue';
+ import DropdownMenu from '../Components/DropdownMenu.vue';

Then clear Vite's dependency cache and restart the dev server clean:

rm -rf node_modules/.vite
npm run dev

If the import is genuinely correct but still fails, add an explicit alias in vite.config.js so path resolution doesn't depend on relative depth at all:

vite.config.js

resolve: {
    alias: {
        '@': '/resources/js',
    },
},

Step-by-Step

1. Confirm the file exists with the exact casing using ls -la on the target directory.
2. Update the import statement to match the exact filename casing and relative path.
3. Delete the Vite cache folder: rm -rf node_modules/.vite.
4. Restart npm run dev and watch the terminal for the same error before touching the browser.
5. If it persists, add a path alias in vite.config.js and switch the import to use it (e.g. @/components/DropdownMenu.vue).
6. Commit the fix and verify on a case-sensitive environment (Docker/Linux) before deploying, since local macOS/Windows won't catch casing bugs.

Edge case: If this error only shows up after deploying to production (Forge, Vapor) but never locally, it's almost certainly a case-sensitivity issue between your local OS and the Linux server's filesystem — this is invisible until deploy, since git itself is case-sensitive but your local editor may not warn you about the mismatch.

Still seeing this after checking paths and cache? Reach out via the Contact page and I'll help trace it.