Vite built .css file is not being used, page broken as old file is 404

Question

I am using Ubuntu 24.04 and a LEMP stack and vite to host a Laravel 12 application. I am deploying with deployer and running npm run build on the server. Occasionally, I get hit with what seems to be a caching bug.

My manifest.json has the correct file names, and vite build files (the auto-generated .css and .js files) do exist, but the page is still looking to old .css file name from somewhere in the past. For the present, the .js file is working. Feel like I have tried everything to clear the caches. Redis is not installed, and I know of no other cache service running on this box.

in my layouts/app.blade.php master page

@vite(['resources/css/app.css', 'resources/js/app.js'])

In the deploy output, I can see where the files are made and saved.

[10.10.10.35] run cd ~/public_html/current && npm run build
[10.10.10.35] > build
[10.10.10.35] > vite build
[10.10.10.35] vite v6.3.6 building for production...
[10.10.10.35] transforming...
[10.10.10.35] ✓ 58 modules transformed.
[10.10.10.35] rendering chunks...
[10.10.10.35] computing gzip size...
[10.10.10.35] public/build/manifest.json              0.27 kB │ gzip:  0.14 kB
[10.10.10.35] public/build/assets/app-Dm5N9a-J.css   62.50 kB │ gzip: 10.60 kB
[10.10.10.35] public/build/assets/app-CMW-OP0O.js   169.14 kB │ gzip: 61.60 kB
[10.10.10.35] ✓ built in 8.05s

manifest.json (file names are correct and do exist, but are not requested by the page)

{
  "resources/css/app.css": {
    "file": "assets/app-Dm5N9a-J.css",
    "src": "resources/css/app.css",
    "isEntry": true
  },
  "resources/js/app.js": {
    "file": "assets/app-CMW-OP0O.js",
    "name": "app",
    "src": "resources/js/app.js",
    "isEntry": true
  }
}

Yet in my browser, the newly built css file is incorrectly referenced.

<head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="DELETED">

        <title>Attendance Portal</title>

        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&amp;display=swap" rel="stylesheet">

        <!-- Scripts -->
        <link rel="preload" as="style" href="https://EXAMPLE.com/build/assets/app-BY3viVot.css">
        <link rel="modulepreload" href="https://EXAMPLE.com/build/assets/app-CMW-OP0O.js">
        <link rel="stylesheet" href="https://EXAMPLE.com/build/assets/app-BY3viVot.css" data-navigate-track="reload">
        <script type="module" src="https://EXAMPLE.com/build/assets/app-CMW-OP0O.js" data-navigate-track="reload"></script>        
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    </head>

Tatachiblob · Accepted Answer · 2025-11-05 08:03:16Z

0

You might want to do php artisan view:cache to recompile your view files.

I believe laravel will look at older files at the time of compilation, so if you made modifications, build your assets, then you will also need to recompile so that it will look at the latest production build assets.

answered Nov 5 at 8:03

Tatachiblob

1,6868 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

wruckie Nov 14 at 16:06

I added php artisan view:cache to my deployment, but that alone did not fix the issue. But it did work, after a reboot. Still trying to wrap my head around the what and why of this situation.

Collectives™ on Stack Overflow

Vite built .css file is not being used, page broken as old file is 404

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related