On demand namespaces doesn't load

[enZane]

Hello there! I was using this integration with multiple namespaces to load them only where are needed, but when I go to another page via remix links, the json file doesn't load and the UI shows the raw keys, any idea of why?

Here is the entry.client that I'm using:

import { RemixBrowser } from '@remix-run/react'
import i18next from 'i18next'
import LanguageDetector from 'i18next-browser-languagedetector'
import Backend from 'i18next-http-backend'
import { startTransition, StrictMode } from 'react'
import { hydrateRoot } from 'react-dom/client'
import { I18nextProvider, initReactI18next } from 'react-i18next'
import { getInitialNamespaces } from 'remix-i18next'

import { i18nConfig } from './i18n/i18n'

async function hydrate() {
  await i18next
    .use(initReactI18next)
    .use(LanguageDetector)
    .use(Backend)
    .init({
      ...i18nConfig,
      ns: getInitialNamespaces(),
      backend: { loadPath: '/locales/{{lng}}/{{ns}}.json' },
      detection: {
        order: ['htmlTag'],
        // Because we only use htmlTag, there's no reason to cache the language
        // on the browser, so we disable it
        caches: [],
      },
    })

  startTransition(() => {
    hydrateRoot(
      document,
      <I18nextProvider i18n={i18next}>
        <StrictMode>
          <RemixBrowser />
        </StrictMode>
      </I18nextProvider>,
    )
  })
}

if (window.requestIdleCallback) {
  window.requestIdleCallback(hydrate)
} else {
  // Safari doesn't support requestIdleCallback
  // https://caniuse.com/requestidlecallback
  window.setTimeout(hydrate, 1)
}

Is the default one provided in the Readme

[sergiodxa]

Are you adding them to the handles export?

[enZane]

Yes, I add them as needed depends on the route i.e

export const handle = {
  i18n: ['shared', 'project', 'customResolvers'],
}

But if I'm in a route that request some different, they aren't charged, and I have to reload to see the translations

[YummYume]

I have the exact same problem with the same config. The current solution is to only export the namespaces in the root.tsx file, but it means all namespaces will be loaded on every page, even if the page only needs one.

[viclafouch]

Hey !

Same issue here.. Did someone find a solution ?