i18next Displayed key instead of value

Question

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

{
    "app": {
        "name": "Example App"
    }
}

In html, I have:

<a href="/" data-i18n="app.name">

In js:

$(document).ready(function() {

    var language_complete = navigator.language.split("-");
    var language = (language_complete[0]);

    console.log('language', language);

    $.i18n.init({
        lng: language,
        fallbackLng: false,
        debug: false
    }, function() {
        $('a').i18n();
    });
});

It displayed app.name instead of Example App. What i missed in my code? Thanks

Answer 1

as of i18next V2, the backend is no longer provided out of the box (see the migration guide), so you're required to define a backend configuration in the init block:

backend: {
    loadPath: '/locales/{{lng}}/{{ns}}.json'
},

if you don't do that, your resources will not be loaded, and translation values will fallback to their respective keys (see the source code).