Vite not building manifest file properly during first deployment to production server

I migrated my laravel project from mix to vite. I'm using docker sail. I was able to migrate the project succesffuly. However, the problem occered when I deployed my changes to the AWS production server. After the first time deployment. I received the error Unable to locate file in Vite manifest: resources/css/base/pages/authentication.css. This filepath is added in the vite.config.js file and after I redeployed, it's working without issue. After every change I deploy to the production server, the first deployment always has the issue of some css & js files being missing in manifest. Second deployment usually fixes this issue. Please advice me on how to build vite manifest with single build command

vite.config.js

import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import react from "@vitejs/plugin-react";
export default defineConfig({
    esbuild: {
        loader: "jsx",
    },
    optimizeDeps: {
        esbuildOptions: {
            loader: {
                ".js": "jsx",
            },
        },
    },
    plugins: [
        laravel({
            input: [
                "resources/css/pages/authentication.css",
                "resources/css/base/pages/authentication.css",
                "resources/css/app.css",
                "resources/js/core/app-root.js",
                // Other CSS & JSS files are here
            ],
            refresh: true,
        }),
        react(),
    ],
    build: {
       chunkSizeWarningLimit: 5120,
      },
    server: {
        hmr: {
            host: "localhost",
        },
    },
});

Error Page

alt text

System configaration

PHP: 8.2
Vite : 3.0.4
Laravel:9
Node.JS:- 16

LaryAI

3 years ago

Level 58

It looks like the issue is related to the vite.config.js file. The input array in the laravel plugin is not being read properly when the project is deployed to the production server.

To fix this issue, you can try adding the refresh option to the laravel plugin in the vite.config.js file. This will force Vite to re-read the input array and build the manifest file properly.

plugins: [
    laravel({
        input: [
            "resources/css/pages/authentication.css",
            "resources/css/base/pages/authentication.css",
            "resources/css/app.css",
            "resources/js/core/app-root.js",
            // Other CSS & JSS files are here
        ],
        refresh: true, // Add this line
    }),
    react(),
],

You can also try running the vite build command before deploying the project to the production server. This will ensure that the manifest file is built properly before the project is deployed.

Please or to participate in this conversation.