Unable to locate file in Vite manifest (work when running dev but not build)

Unable to locate file in Vite manifest: resources/js/Pages/Pages/LandingPage.vue.

I am getting this error after running "npm run build". Everything work fine when I run "npm run dev".

My composer.json

"require": {
        "php": "^8.1",
        "guzzlehttp/guzzle": "^7.2",
        "inertiajs/inertia-laravel": "^0.6.8",
        "laravel/framework": "^10.10",
        "laravel/sanctum": "^3.2",
        "laravel/tinker": "^2.8",
        "tightenco/ziggy": "^1.0"
    },

My app.js

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

        // Allow page overiding default layout
        page.default.layout ??= AppLayout;

        return page;
      },

My app.blade.php

<!-- Scripts -->
        @routes
        @vite(['resources/js/app.js', "resources/js/Pages/{$page['component']}.vue"])
        @inertiaHead
    </head>
    <body class="font-sans antialiased">
        @inertia
    </body>
</html>

My controller renders the page

/**
     * Handle the incoming request.
     */
    public function __invoke(Request $request)
    {
        return Inertia::render('Pages/LandingPage');
    }

that is stored in resources/js/Pages/Pages/LandingPage.vue

Layout are store in resources/js/Layouts/AppLayout.vue

My manifest.json is...quite empty because of the { eager: true } in my app.js... I currently only coded the LandingPage :)

{
  "fonts/Life_Savers/LifeSavers-Regular.ttf": {
    "file": "assets/LifeSavers-Regular-ebd8d5d1.ttf",
    "src": "fonts/Life_Savers/LifeSavers-Regular.ttf"
  },
  "resources/js/app.css": {
    "file": "assets/app-47146156.css",
    "src": "resources/js/app.css"
  },
  "resources/js/app.js": {
    "assets": [
      "assets/LifeSavers-Regular-ebd8d5d1.ttf"
    ],
    "css": [
      "assets/app-47146156.css"
    ],
    "file": "assets/app-8e167234.js",
    "isEntry": true,
    "src": "resources/js/app.js"
  }
}

PS: I've read some thread on the same topic, but can´t understand / find the solution... https://laracasts.com/discuss/channels/inertia/unable-to-locate-file-in-vite-manifest?page=1&replyId=869572 or https://laracasts.com/discuss/channels/vite/unable-to-locate-file-in-vite-manifest-resourcesjspageswelcomevue

MohamedTammam

2 years ago

Level 51

In your local, you might have hot file. You should delete it to test the build files.

Typically, that file should be while development but deleted in production.

LNCoding

2 years ago

Level 1

Thank you @MohamedTammam, do you know where I could find this "hot" file in my local ?

I'm using vite

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

In a Laragon (i.e. Apache) environment

MohamedTammam

2 years ago

Level 51

@LNCoding It's in the public folder.

1 like

LNCoding

2 years ago

Level 1

Thank you @MohamedTammam,

My apologies for the 1 week delay in my reply as I was away from my computer ...

I've looked in my public folder (and on Internet..) but I don't have file/sub-folder named "hot" ... do you mean to delete all the "public/build" folder ?

Thank you again for your help, LN

MohamedTammam

2 years ago

Level 51

@LNCoding More details in this article: https://laraveldaily.com/post/how-to-deploy-css-js-assets-vite-laravel

1 like

LNCoding

2 years ago

Best Answer

Level 1

Thank you for your help @mohamedtammam , it made me understand that I had to remove

"resources/js/Pages/{$page['component']}.vue"

in my my app.blade.php file to let vite do its stuff.

Thank you Best regard,

1 like

Please or to participate in this conversation.