Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

NielsNumbers's avatar

Cache issues with Interia?

In my app.blade.php I am using the mix helper to reference the js files:

<!DOCTYPE html>
<html class="bg-gray-100">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="shortcut icon" href="/healy-sync.png" type="image/png">
    <link href="{{ mix('/css/app.css') }}" rel="stylesheet" />
    @routes
    <script src="{{ mix('js/manifest.js') }}" defer></script>
    <script src="{{ mix('js/vue-vendor.js') }}" defer></script>
    <script src="{{ mix('/js/vue-app.js') }}" defer></script>
    @inertiaHead
</head>
<body>
@inertia
</body>
</html>

In my webpack.mix.js I have added the version() call:

mix
    .js('resources/js/app.js', 'public/js')
    .js('resources/js/vue-app.js', 'public/js')
    .vue()
    .extract(['vue'], 'public/js/vue-vendor.js')
    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import'),
        require('tailwindcss'),
        require('autoprefixer'),
    ])
    .css('resources/sso/background.css', 'public/sso')
    .css('resources/sso/login.css', 'public/sso')
    .css('resources/sso/signin.css', 'public/sso')
    .sourceMaps()
    .version();

On my prod server, I compile assets with npm run prod

And this works most of the times, but sometimes, I run into cache issues, where somehow a vue-component appears to be not showing correctly. It shows some updated that I coded, but not all. I have to hard refresh the browser and then it works. I really don't understand how these partial updates are even possible.

Is anything wrong with my setup?

0 likes
8 replies
vincent15000's avatar

That's strange, but it could be related with an issue I encounter at the moment.

Sometimes when I try to log in to my application, it's not possible and it generates an error.

I have seen that instead of having only 2 cookies for authentication, I have much more cookies : 2 new cookies are created each time I attemp to log in. And I can really log in only if I manually delete all cookies.

I don't know if our two problems are related, but perhaps it's worth speaking around.

NielsNumbers's avatar

@Sinnbeck so I changed the version function in "HandleInertiaRequests.php":

public function version(Request $request): ?string
    {
        if (file_exists($manifest = public_path('mix-manifest.json'))) {
            return md5_file($manifest);
        }

        return parent::version($request);
    }

But it is still not working.

I also wonder if this is really necessary, because at the asset-versioning page that you linked to, its stated, that webpack versioning should be enough:

Cache busting

Asset refreshing in Inertia works on the assumption that a hard page visit will trigger your assets to reload. >However, Inertia doesn't actually do anything to force this. Typically this is done with some form of cache >busting. For example, appending a version query parameter to the end of your asset URLs.

If you're using Laravel Mix, you can do this automatically by enabling versioning in your webpack.mix.js file.

Sinnbeck's avatar

@Elenktik Those are two different things. First of you have the mix versioning. This ensures you get the correct css/js files upon reload of the page (F5). But if you are already on the page, and it is a SPA (inertia is), it wont normally detect that there are new files available. Therefor you must reload the page with F5 to get the new js/css files. Luckily inertia can do this automatically, by using the inertia verison method

So find out if the problem is with the mix versioning or the page not auto reloading

NielsNumbers's avatar

@Sinnbeck ah okay, got it. But my problem is with mix versioning, as there is no update, even if I press F5.

I am using code-splitting and dynamic imports as explained in https://laracasts.com/series/build-modern-laravel-apps-using-inertia-js/episodes/14

and in the comment section its explained that it causes cache busting issues and can be fixed using

mix.webpackConfig({ 
	output: { chunkFilename: "js/app/[name].js?id=[chunkhash]" } 
});

so I will try out this now

Please or to participate in this conversation.