Firefox Page Reload Bug

[Verox001]

Version:

• @inertiajs/react version: 1.2.0

Describe the problem:

Everytime when I'm trying to access my page via Firefox without having cached anything, the page reloads quickly a few times or so, which is really annoying. It both happens locally and in production, but only on Firefox.

Steps to reproduce:

Setup an Inertia application (I'm using Laravel with these configs):
vite.config.ts

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';

export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/scripts/app.tsx',
            ssr: 'resources/scripts/ssr.tsx',
            refresh: true,
        }),
        react()
    ],
    resolve: {
        alias: {
            '@': '/resources/scripts',
        },
    },
    server: {
        hmr: {
            protocol: process.env.DDEV_HOSTNAME ? "wss" : "ws",
            host: `${process.env.DDEV_HOSTNAME ?? "localhost"}`,
        }
    }
});

app.tsx:

import './bootstrap';
import '../css/app.css';

import {createRoot} from 'react-dom/client';
import {createInertiaApp} from '@inertiajs/react';
import {resolvePageComponent} from 'laravel-vite-plugin/inertia-helpers';
import '@fontsource/source-sans-pro/300.css';
import '@fontsource/source-sans-pro/400.css';
import '@fontsource/source-sans-pro/600.css';
import '@fontsource/source-sans-pro/700.css';

// Fonts
import '@fontsource/lato/300.css';
import '@fontsource/lato/400.css';
import '@fontsource/lato/700.css';
import {PageProps} from "@/types";

const appName = import.meta.env.VITE_APP_NAME || 'Test';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => resolvePageComponent(`./Pages/${name}.tsx`, import.meta.glob('./Pages/**/*.tsx')),
    setup({el, App, props}) {
        const root = createRoot(el);

        root.render(
            <App {...props} />
        );
    },
    progress: {
        color: '#00a6a8'
    },
});

Try accessing the site over Firefox an you'll notice the weird reloading hehaviour. (You can use any React component for testing)

If you need any more details or if anyone else has this issue, please let us know!

[PedroAugustoRamalhoDuarte]

Hello @Verox001 i try a few different applications with Inertia and I could not reproduce this bug with Inertia + Rails. Can you share more information please or maybe share the website in production.

[Verox001]

Hello @Verox001 i try a few different applications with Inertia and I could not reproduce this bug with Inertia + Rails. Can you share more information please or maybe share the website in production. I'm also using Laravel instead of Rails, so my Middleware looks like this (HandleInertiaMiddleware.php):

<?php

namespace App\Http\Middleware;

use App\Http\Resources\UserResource;
use App\Models\ExchangeRate;
use App\Models\UserAffiliatedUser;
use Illuminate\Http\Request;
use Inertia\Middleware;
use Tightenco\Ziggy\Ziggy;

class HandleInertiaRequests extends Middleware
{
    /**
     * The root template that is loaded on the first page visit.
     *
     * @var string
     */
    protected $rootView = 'app';

    /**
     * Determine the current asset version.
     */
    public function version(Request $request): string|null
    {
        return parent::version($request);
    }

    /**
     * Define the props that are shared by default.
     *
     * @return array<string, mixed>
     */
    public function share(Request $request): array
    {
        $loggedIn = auth()->check();
        $user = auth()->user();

        return [
            ...parent::share($request),
            'auth' => [
                'user' => $loggedIn ? new UserResource($user, null) : null,
            ],
            'locale' => $loggedIn ? $user->locale : session('locale'),
            'theme' => $loggedIn ? $user->theme : session('theme'),
            'ziggy' => fn () => [
                ...(new Ziggy)->toArray(),
                'location' => $request->url(),
                'name' => $request->route()?->getName(),
            ],
            'route' => $request->route()?->getName(),
            'flash' => [
                'success' => session('success'),
                'error' => session('error'),
                'warning' => session('warning'),
                'info' => session('info'),
            ],
        ];
    }
}

Yeah, sure. This is the site: https://cimeyclust.com/ (not finished due to reasons specified above 😅)
Thanks for helping out here!

If you need anything else, please let me know!

[Verox001]

@PedroAugustoRamalhoDuarte Hey, just following up on something: The issue doesn't occur if I use the normal router.reload function, but only my custom one, which makes sure that no loading overlay is shown. Maybe there's something wrong with it?

import {router} from "@inertiajs/react";
// @ts-ignore
import {VisitOptions} from "@inertiajs/core/types/types";
import {useLoading} from "@/Contexts/InertiaContext";

export default (loading: boolean, options?: Exclude<VisitOptions, 'preserveScroll' | 'preserveState'>) => {
    if (loading) return;  // Exit early if open is true

    if (!options) options = {};

    // Append flash to options.only if it's not already there
    if (options.only && !options.only.includes('flash')) {
        options.only.push('flash');
    }

    // Append Background-Update header to options.headers if it's not already there
    if (!options.headers || !options.headers['Background-Update']) {
        if (!options.headers) options.headers = {};

        if ((options.headers['Background-Update'] ?? 'false') === 'false') {
            options.headers['Background-Update'] = 'true';
        }
    }

    router.reload(options);
}

[PedroAugustoRamalhoDuarte]

Hello @Verox001, sorry for the late response. This is a very strange bug—I was able to reproduce it here as well, but only with Firefox. It’s quite challenging to debug in this way. Perhaps it would be better to open a help request in the Discord forum: https://discord.gg/K2F34GC3. It’s likely an issue specific to your application and not related to Inertia, but it’s certainly odd that it only happens in Firefox.

[PedroAugustoRamalhoDuarte]

It's something related to your session cookies. When I delete them, I can reproduce the error, but when the cookies are present, it works normally.