CODEWITHSUNDEEP
storybookreact-i18next
codenamezero
codenamezero

Reputation: 3079

i18next keeps saying missingKey but it looks fine?

I am trying to use i18next in our React app, the translation loaded just fine on the page and I was able to switch between the supported languages. But the console log would keeps on printing missingKey, something tells me that I'm doing something wrong... but I cannot pinpoint it. Could someone give me some clues?

The initialization was done like this:

  const initOptions = {
    fallbackLng: ['en'],
    supportedLngs: ['en', 'fr'],
    ns: ['common', 'dashboard'],
    defaultNS: 'common',
    react: {
      useSuspense: false
    },
    debug: true,
    interpolation: {
      escapeValue: false
    },
    backend: {
      backends: [
        resourcesToBackend((language, namespace, callback) => {
          console.debug('resourcesToBackend');
          import(`./locales/${language}/${namespace}.json`)
            .then((resources) => {
              console.debug('then?', resources);
              callback(null, resources)
            })
            .catch((error) => {
              console.debug('catch?', error);
              callback(error, null)
            })
        }),
        HttpApi
      ]
    }
  }

  i18n
    .use(ChainedBackend)
    .use(LanguageDetector)
    .use(initReactI18next) // passes i18n down to react-i18next
    .init(initOptions);
  }

Then assets folder look something like this:

locales/
├─ en/
│  ├─ common.json
│  ├─ dashboard.json
├─ fr/
│  ├─ common.json
│  ├─ dashboard.json

The component using the translation is just a dummy component:

  const Example = () => {
    const { t } = useTranslation();
    return (
      <div className='container'>
          <h1>{t('app_title')}</h1>
          <hr />
          <ul>
            <li>{t('dashboard:item1')}</li>
            <li>{t('dashboard:item2')}</li>
            <li>{t('dashboard:item3')}</li>
          </ul>
      </div>
    );
  };

enter image description here

Upvotes: 0

Views: 1524

Answers (1)

jamuhl
jamuhl

Reputation: 4498

looks like you're not telling the useTranslation that you need the namespace 'dashboard' - so the hook does not assert it's loaded

https://react.i18next.com/latest/usetranslation-hook#loading-namespaces

const Example = () => {
    const { t } = useTranslation('dashboard');
    return (
      <div className='container'>
          <h1>{t('app_title')}</h1>
          <hr />
          <ul>
            <li>{t('dashboard:item1')}</li>
            <li>{t('dashboard:item2')}</li>
            <li>{t('dashboard:item3')}</li>
          </ul>
      </div>
    );
  };

Upvotes: 1

Related Questions