dependent-tan

How to enable i18n and nprogress client-side ?

Hello, below is how I managed to add nprogress as well as loading the react-i18next extension. Is this the proper way? Here is my client.tsx file:

const router = createRouter();

const i18nInstance = await initI18n();

NProgress.configure({ showSpinner: false, parent: "body" });

router.subscribe("onBeforeLoad", (event) => {
    if (event?.fromLocation?.pathname === event.toLocation.pathname && event.fromLocation.hash !== event.toLocation.hash) {
        return;
    }
    NProgress.start();
});

router.subscribe("onResolved", (_event) => {
    NProgress.done();
});

hydrateRoot(
    document,
    <I18nextProvider i18n={i18nInstance}>
        <StartClient router={router}/>
    </I18nextProvider>
);

const router = createRouter();

const i18nInstance = await initI18n();

NProgress.configure({ showSpinner: false, parent: "body" });

router.subscribe("onBeforeLoad", (event) => {
    if (event?.fromLocation?.pathname === event.toLocation.pathname && event.fromLocation.hash !== event.toLocation.hash) {
        return;
    }
    NProgress.start();
});

router.subscribe("onResolved", (_event) => {
    NProgress.done();
});

hydrateRoot(
    document,
    <I18nextProvider i18n={i18nInstance}>
        <StartClient router={router}/>
    </I18nextProvider>
);

nprogress seems ok but react-i18next gives me a warning that I need to pass an instance (which I did 🧐) but it still works it is just that there is a moment where i don't have the translations, then they display like 1 seconds later. The error:

react-i18next:: useTranslation: You will need to pass in an i18next instance by using initReactI18next { code: 'NO_I18NEXT_INSTANCE' }

react-i18next:: useTranslation: You will need to pass in an i18next instance by using initReactI18next { code: 'NO_I18NEXT_INSTANCE' }

Thanks in advance for the help 🙂

6 Replies

constant-blue•6mo ago

this will result in hydration issues if you only put it into the client.tsx usually you would put this somewhere in the root route

dependent-tanOP•6mo ago

for both or react-i18next only ?

constant-blue•6mo ago

no idea what nprogress does

dependent-tanOP•6mo ago

it is a fake loader (the same that github has the blue loading bar at the top)

constant-blue•6mo ago

is that react based?

dependent-tanOP•6mo ago

Nope, it was created a long time ago ^^

Gaming

Programming

How to enable i18n and nprogress client-side ?

Did you find this page helpful?