TanStackT
TanStack•10mo ago•
6 replies
radical-lime

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>
);


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' }


Thanks in advance for the help 🙂
Was this page helpful?