Laravel 8 Inertia Jetstream website render blank

Question

I'm working on a project for a client, the project sometimes render blank... I have to make a hard refresh before it renders the page again and I get 0 errors in the console.

Easy way to replicate the issue for me is to visit the website do a NON hard refresh a few times "CTRL + R", and it will suddenly render total blank and continue like that until you do a hard refresh

When the page renders blank only the data from HandleInertiaRequest.php is rendered as seen in this image:

When the page renders as it is supposed to there is data below the HandleInertiaReuqest.php data:

I have no clue as to how to fix this, there is someone who had this problem here , but his problem is not exactly the same as mine, and his solution is nothing of concern here.. this happens every now and then, quite often actually.. it happens both on mobile and desktop.

I get nothing in the console, it just seem like it won't render before doing a hard refresh, this is a live project and I think it is quite damaging for the project .

webpack.mix.js

const mix = require('laravel-mix');

    mix.js('resources/js/app.js', 'public/js').vue()
        .postCss('resources/css/app.css', 'public/css')
        .options({
            postCss: [
                require('postcss-import'),
                // require('autoprefixer'),
                require('@tailwindcss/jit')
            ]
        })
        .webpackConfig(require('./webpack.config'));
    
    if (mix.inProduction()) {
        mix.version();
    }

webpack.config.js

const path = require('path');

module.exports = {
    resolve: {
        alias: {
            '@': path.resolve('resources/js'),
        },
    },
};

app.js

require('./bootstrap');

// Import modules...
import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';
import cQuery from "@/cQuery.js";

import { io } from 'socket.io-client'

if (! window.hasOwnProperty('io')) {
    if (
        window.origin === "http://bitculator.test" ||
        window.origin === "https://bitculator.com" ||
        window.origin == "https://bitculator.test"
    ) {
        window.io = io.connect(`${window.origin}:6001`);
        window.io.on('connection');
    }
}

const el = document.getElementById('app');

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => require(`./Pages/${name}.vue`),
    setup({ el, app, props, plugin }) {

        return createApp({ render: () => h(app, props) })
        .use(plugin)
        .mixin({ methods: { route, ...cQuery}})
        .mount(el);
    },
});

/** Top Progress Loader */
InertiaProgress.init({
    // The delay after which the progress bar will
    // appear during navigation, in milliseconds.
    delay: 50,
  
    // The color of the progress bar.
    color: '#f0ba19',
  
    // Whether to include the default NProgress styles.
    includeCSS: true,
  
    // Whether the NProgress spinner will be shown.
    showSpinner: false,
  })

I honestly think about rewriting the whole project in livewire, just to see if this stops..

Answer 1

After updating inertia, Jetstream packages etc etc I added "defer" to my google analytics script this question pointed me in the right direction

Changed google analytics script to this:

<!-- Global site tag (gtag.js) - Google Analytics -->
<script defer async src="https://www.googletagmanager.com/gtag/js?id=G-SDK4391YJ7"></script>
<script defer>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-SDK4391YJ7');
</script>