i18next keeps saying missingKey but it looks fine? - storybook

Question

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

Answer 1

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