[Vuejs]-Laravel Vue Project gets blank white page on initial run only on production, solved with hard refresh. How can I prevent this?

by

0👍

✅

I finally found the answer.

The problem was that Laravel Mix was adding a hash to app.js, but NOT adding it to the chunked bundles.

I needed to change up the webpack.mix.js file and add the chunkhash to the output. This ensured that the chunked files weren’t brought in from disk cache.

For example:

mix.webpackConfig({
    ...
    output: {
        chunkFilename: '[name].js?[chunkhash]',
    }
})

Note that I added the ?[chunkhash] after the filename.

Here was my inspiration: https://laracasts.com/discuss/channels/vue/laravel-vue-files-requiring-hard-refresh-even-when-caching-implemented

0👍

Could be related to the users in production having a cached copy of your assets, if not already, can you add to your webpack.mix.js file:

if (mix.inProduction()) {
    mix.version();
}

To ensure that users are getting a fresh copy of your assets when you deploy to production (https://laravel.com/docs/9.x/mix#versioning-and-cache-busting )

Leave a comment