i18next Displayed key instead of value, TVOs, js

Question

I have similar problem to this one but i did all they wrote and still its something wrong i18next Displayed key instead of value

I have translation.json file in /locales/en/

  {
    "Ustawienia"    :   "Settings",
    "O aplikacji"   :   "About Application"
   }

In application.js

function launchApp(options) {
    var javascriptFiles = [
        `${options.BASEURL}js/i18next.min.js`,
        `${options.BASEURL}js/i18next-xhr-backend.min.js`,
        `${options.BASEURL}templates/MainTemplate.js`,
];
evaluateScripts(javascriptFiles, function(success) {
        if(success) {

            i18next.use(i18nextXHRBackend);
            i18next.init({
                lng: userLanguage,
                debug: true,
                fallbackLng: false,
                keySeparator: false,
                nsSeparator: false,
                useLocalStorage: true ,
                useDataAttrOptions:true,

                //resGetPath :  '/locales/{{lng}}/{{ns}}.json',
                backend: {
                    loadPath: options.BASEURL + '/locales/{{lng}}/{{ns}}.json'

                },


            }, (err, t) => {
  // initialized and ready to go!


                    });

            var doc = new MainTemplate().getTemplate();
            doc.addEventListener("select", handleMainNavigationClick);
            mainDocument = doc;
            navigationDocument.pushDocument(doc);
            setTimeout(dismissModalView, 2000);
        }

and when i want to use i18next.t in template for example

<title>${i18next.t("Ustawienia")}</title>

It show key(Ustawienia) instead of value (Settings) do you have any tips for me what i'm missing?

Answer 1

I believe your problem might be the place in which you initialise mainDocument. The callback from i18next.init() is not used, but that is where you are sure that it actually is initialised. Your code should look something like this

if(success) {

    i18next.use(i18nextXHRBackend);
    i18next.init({
        lng: userLanguage,
        debug: true,
        fallbackLng: false,
        keySeparator: false,
        nsSeparator: false,
        useLocalStorage: true ,
        useDataAttrOptions:true,
        backend: {
            loadPath: options.BASEURL + '/locales/{{lng}}/{{ns}}.json'

        },
    }, (err, t) => {
        // initialized and ready to go!
        // this is where initialisation-dependent code should go

        // additionally check if there was an error initialising i18next
        if (err === undefined) {
            var doc = new MainTemplate().getTemplate();
            doc.addEventListener("select", handleMainNavigationClick);
            mainDocument = doc;
            navigationDocument.pushDocument(doc);
            setTimeout(dismissModalView, 2000);
        } else {
            // there was an error, handle it
        }
    });

}