Laravel 12 Breeze conflicts with path name case changes

You're running into this issue because Laravel Breeze (as of v12) moved to using lowercase directory names for the Vue components (e.g., pages/auth/login.vue instead of Pages/Auth/Login.vue), but the conventions in controllers (e.g., Inertia::render('Auth/Login')) and sometimes the component names (PascalCase for files) haven't fully caught up, causing a mismatch.

Why does this happen?

• Inertia looks for components by path. If controller returns 'Auth/Login' but your files are now at pages/auth/login.vue, the casing mismatch causes Inertia to not find the Vue files.
• Your temporary resolve fix (lowercasing only directories) helps for the provided cases, but doesn't handle situations where there are subfolders with mixed case (like profile/Partials).

---

The Robust Solution

Approach:

• Map all incoming names from controllers to the correct file paths (i.e., lowercase directories, correct file casing).
• This is easiest if you enforce all folder and file names to be lowercase. If that's not an option, you'll need a dynamic approach.

Option 1: Change Your Project Structure

The simplest maintenance path—rename all directories and filenames to be lowercase.

• Update references in both your JS (import.meta.glob) and PHP (controller) code to use lowercase everywhere.
• e.g. Inertia::render('auth/login')

But if you can't or don't want to rename everything:

---

Option 2: Dynamic Page Resolver

Here's an improved resolver that will dynamically match files in your pages directory, regardless of case, so you don't have to worry about the mismatches.

// resources/js/app.js or wherever you set up Inertia/Vue

resolve: async (name) => {
    // Get ALL available pages (case-insensitive matching)
    const pages = import.meta.glob('./pages/**/*.vue');
    // Build a mapping of normalized (lowercase) paths to actual file importers
    const pageMap = {};
    for (const key in pages) {
        // Remove './pages/' and '.vue', lowercase, and replace backslashes (Windows)
        let normalized = key
            .replace(/^\.\/pages\//, '')
            .replace(/\.vue$/, '')
            .toLowerCase()
            .replace(/\\/g, '/');
        pageMap[normalized] = pages[key];
    }
    // Generate incoming name's lowercased path, replacing slashes
    const requested = name.toLowerCase();
    if (pageMap[requested]) {
        return pageMap[requested]().then((mod) => mod.default || mod);
    }
    throw new Error(`Page not found: ${name}`);
}

Replace your previous resolve function with this.

How it works:

• When a controller says Inertia::render('Auth/Login'), this function will lowercase that to 'auth/login' and look for any .vue file matching in lowercase, regardless of how your folders or files are cased.

---

TL;DR

• Best: Make all your page directories and filenames lowercase and match their use in controllers.
• If you can't: Use the dynamic page resolver above to make file loading case-insensitive.

---

Why was this changed in Laravel Breeze 12? The update aligns with Tailwind, Vite, and other modern conventions (DRY, UNIX-style lowercasing for easier cross-platform dev). It also avoids issues on case-insensitive filesystems (like macOS and Windows). BUT it does require syncing your code's usage and paths.

---

References

• Laravel Breeze Pull Request: Lowercase Pages Directory
• Inertia.js - Dynamic Imports

---

In summary:

• Either convert all folders, files, and controller references to lowercase,
• OR use the "case-insensitive" dynamic resolver above.

Let me know if you need help with the actual renaming, or setting up the resolver!