Laravel inertia vue3 - Unable to locate file in Vite manifest: resources/js/Pages/Home.vue

Question

On my local, using "npm run dev" I can correctly compile the resource folders, but when I deploy on a shared server, I cannot access the command line afterwards, even after executing the "npm run build" command and creating the file manifest, I get this error:

@vite(['resources/js/app.js', "resources/js/Pages/{$page['component']}.vue"])

This is what I have in my manifest.json file:

I could not find a solution.

Answer 1

I have found a solution that works in prod, but it breaks the npm run dev (and I cannot restore it yet).

I found something interesting in case you use a persistent layout.

I do, and I changed my app.js accordingly. If I revert it, the Vite error disappears, but no persistent layout, which is a no-go, of course.

Before (no vite error):

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),

After:

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: name => {
        const pages = import.meta.glob('./Pages/**/*.vue', {eager: true});
        let page = pages[`./Pages/${name}.vue`];
        page.default.layout ??= AuthenticatedLayout;
        return page;
    },

And here is the solution-ish:

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: name => {
        const page = resolvePageComponent(
            `./Pages/${name}.vue`,
            import.meta.glob('./Pages/**/*.vue')
        );
        page.then((module) => {
            module.default.layout ??= AuthenticatedLayout;
        });
        return page;
    },

Found here: https://laracasts.com/discuss/channels/vite/vite-inertiajs-persistent-layouts