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

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

• javascript
• jquery
• translation
• i18next

Share Improve this question Follow edited Mar 26, 2020 at 14:55 Olcay Ertaş 6,25688 gold badges8282 silver badges116116 bronze badges asked Sep 27, 2018 at 13:58 ShereinSherein 1,89744 gold badges1717 silver badges2626 bronze badges 3

• Can you confirm your .json file gets loaded if you look into the network tab of devtools? Also load: 'languageOnly' should be used if you only use the primary language. – JoeriSmits Commented Sep 27, 2018 at 14:59
• json file isn't loaded. Also, I use more than one language. – Sherein Commented Sep 30, 2018 at 6:34
• Here's an example I use perhaps it will help you resolve your problem: pastebin./cbu0jCnZ – JoeriSmits Commented Oct 1, 2018 at 7:23

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

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"