after page reload , getting missingKey problem

Question about react-i18next

Questions should be posted on StackOverflow

Before page reload , this is working well …

When i reload by key (F5 , or Ctrl+ F5) , and then this is not working well … You can see bugs in here . https://www.screencast.com/t/Q6JNPUCSJh https://www.screencast.com/t/j6JOG7A669Ub Not sure what is the problem … This is init function.

i18n.use(Backend)
    .use(LanguageDetector)
    .use(initReactI18next)
    .init({
        fallbackLng: 'en',
        debug: true,
        interpolation: {
            escapeValue: false, // not needed for react as it escapes by default
        },
        
        react:{
            wait : true
        }
    });

This is source code of side bar

import React from 'react'
import {Trans} from 'react-i18next';
export default {
  items: [
    {
      name: <Trans i18nKey="menu.dashboard"/>,
      url: '/test',
      icon: 'icon-speedometer',
    },
    {
      name: <Trans i18nKey="menu.calendars"/>,
      url: '/test',
      icon: 'icon-calendar'
    },
]
}

What is wrong in here ?

[jamuhl]

Your code. i18next.init is async…this code runs before init is done -> means that code runs outside of hook, HOC

[jamuhl]

i18next.init();
i18next.t('key'); // -> missing as init not yet done
i18next.language; // -> undefined as language not yet set as init is still running loading translations

<Trans i18nKey='key' /> // -> missing as not init yet

i18next.init({}, () => {
i18next.t('key'); // -> ok
i18next.language; // -> ok

withTranslations()(function() {
return <Trans i18nKey='key' />; // -> ok as Suspended
});