Texts are not showing while refreshing the page

[Nobody9512]

Sometimes texts that need to be translated are not visible when the page is refreshed. How can I fix this error? ssr.tsx

Version: php: 8.2 laravel: 10 inertiajs/inertia-laravel": "^0.6.3" "laravel-react-i18n": "^2.0.4"

import ReactDOMServer from "react-dom/server";
import { createInertiaApp } from "@inertiajs/react";
import createServer from "@inertiajs/react/server";
import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers";
import route from "../../vendor/tightenco/ziggy/dist/index.m";
import { LaravelReactI18nProvider } from "laravel-react-i18n";

const appName = import.meta.env.VITE_APP_NAME || "Laravel";
let locale = "en";

if (typeof window !== "undefined") {
    locale = window.document.documentElement.lang || "en";
}

createServer((page) =>
    createInertiaApp({
        page,
        render: ReactDOMServer.renderToString,
        title: (title) => `${title} - ${appName}`,
        resolve: (name) =>
            resolvePageComponent(
                `./Pages/${name}.tsx`,
                import.meta.glob("./Pages/**/*.tsx")
            ),
        setup: ({ App, props }) => {
            // @ts-ignore
            global.route = (name, params, absolute) =>
                route(name, params, absolute, {
                    // @ts-expect-error
                    ...page.props.ziggy,
                    // @ts-expect-error
                    location: new URL(page.props.ziggy.location),
                });

            return (
                <LaravelReactI18nProvider
                    files={import.meta.glob("../../lang/*.json")}
                    locale={locale}
                    fallbackLocale="en"
                >
                    <App {...props} />
                </LaravelReactI18nProvider>
            );
        },
    })
);

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 { LaravelReactI18nProvider } from "laravel-react-i18n";
import AppContextProvider from "./Context/AppContextProvider";
import dayjs from "dayjs";

const appName = import.meta.env.VITE_APP_NAME || "Larave;
const locale = document.documentElement.lang || "en";

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

        dayjs.locale(locale);
        root.render(
            <LaravelReactI18nProvider
                files={import.meta.glob("../../lang/*.json")}
                locale={locale}
                fallbackLocale="en"
            >
                <AppContextProvider>
                    <App {...props} />
                </AppContextProvider>
            </LaravelReactI18nProvider>
        );
    },
    progress: {
        color: "#F4E869",
        showSpinner: true,
    },
});

Dashboard.tsx

....
const { t } = useLaravelReactI18n();
...
<span>
    {t("decision.documents.create.date")}
</span>
...

[Bartlomiej-Stec]

Hi, have you solved this problem? I have the same.

[Nobody9512]

No, I could not solve this problem. I used the i18n instead.

[christianascone]

I ran into the same issue and realized it was happening because the translation map was still loading and empty when I tried to use it. You can check the loading state to track when it's ready.

const { t, loading } = useLaravelReactI18n();

This way, you can ensure your component waits until the translations are fully loaded before rendering them.