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

Question

I'm building a web app using Laravel 8.6, Vue 3.2, and hosting on AWS with Laravel Forge. Everything works fine locally and on staging. However, when I deploy the app to production, some people initially see a blank white screen. They don't see any errors in the console. This problem is fixed with a hard refresh on the browser. However, when I try to replicate this issue locally, I can't replicate it.

The only real difference between local and staging and production is that on production, I'm running "npm run prod", which runs "npx mix --production".

Could this be an error in the server configuration? Any idea how to solve?

I appreciate any comments or suggestions!

Answer 1

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

Answer 2

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 )