i18next Load translations from json files

Question

I have English json translation file in path: translation/en.json

I init i18next like this:

i18next.init({
    lng: navigator.language,
    fallbackLng : "en",
    backend: {
        loadPath: '/translation/{{lng}}.json',
    }
});

after running

i18next.t(KEY);

will print "KEY" and not its value in the translation file

it was working well when the translation were inside 'resource' parameter in i18next object. like below:

i18next.init({
    lng: navigator.language,
    fallbackLng : "en",
    resources: {
        en: {
            translation: {
                "KEY": "keyValue"
            }
        }
    }
});

I use i18next framework

Answer 1

I used initImmediate:false which will wait translation to be loaded.

i18next
  .use(i18nextXHRBackend)
  .init({
    //debug:true,
    initImmediate: false, // set initImmediate false -> init method finished only when all resources/translation finish loading (async behaviour)
    lng: "en",
    fallbackLng : "en",
    backend:{
      loadPath: chrome.runtime.getURL('translation/{{lng}}.json')
    }
});

I used chrome.runtime.getURL since I use i18next in chrome extension and translation files should be loaded to this folder "translation"