I18Next doesn't work when loading data from backend

Question

I implement the integration of i18next into application with getting data from the backend (i18next-xhr-backend). Everything looks good, I don't get any errors, but in the end the translation doesn't work.

I use Vue and Webpack. Here is my code:

main.js:

...
import VueI18Next from "./i18next.js";
...
Vue.use(VueI18Next, (i18next) => {
  let router = require("./router").default; // Load only after i18next initialized

  new Vue({
    el: "#app",
    components: {
      App
    },
    router,
    store,
    render: h => h("app")
  });
});

i18next.js:

import Vue from "vue";
import { isFunction, defaultsDeep } from "lodash";
import i18next from "i18next";
import i18NextXHR from "i18next-xhr-backend";

function install(Vue, callback, options = {}) {
  i18next
    .use(i18NextXHR)
    .init(defaultsDeep({}, {
      lng: "en",
      debug: true,
      fallbackLng: "en",
      whitelist: ["en", "ru"],
      ns: ["app"],
      defaultNS: "app",
      load: "languageOnly",
      saveMissing: true,
      saveMissingTo: "all", // "fallback", "current", "all"

//piece of code #1
/*    resources: {
              en: {
                app: {
                  "SeeAllNotifications": "a b c",
                  "Test2": "Test 2"
                }
              }
            },*/

//piece of code #2
      backend: {
        // path where resources get loaded from
        loadPath: "/locales/resources.json?lng={{lng}}&ns={{ns}}",
        // path to post missing resources
        addPath: "/locales/add/{{lng}}/{{ns}}",
        // server supports multiloading
        allowMultiLoading: false,
        // allow cross domain requests
        crossDomain: false
      },
    }), (err, t) => {


      Vue.prototype.$lng = i18next.language;
      Vue.prototype._ = (key, opts) => {
        return t(key, opts);
      };

      console.log("I18Next initialized! Language: " + i18next.language);

      console.error('======TEST======' + i18next.t('SeeAllNotifications'));

      if (isFunction(callback))
        callback(i18next, t);
    });

  // Register as a filter
  Vue.filter("i18n", function(value, options) {
    return i18next.t(value, options);
  });

  // Register as a directive
  Vue.directive("i18n", {
    bind: function(el, binding, vnode) {
      el.innerHTML = i18next.t(binding.expression);
    }
  });

  Vue.prototype.$i18n = i18next;
  Vue.prototype._ = (key, opts) => {
    return i18next.t(key, opts);
  };
}

export default {
  install
};

Resource URL is correct. http://localhost:4000/locales/resources.json?lng=en&ns=app In response, I get the correct data:

{"en":{"app":{"SeeAllNotifications":"See all notifications",...}}}

When I load the page I get these messages:

i18next::backendConnector: loaded namespace app for language en 
{en: {…}}
    en:
        app: {SeeAllNotifications: "See all notifications", ...",
i18next: languageChanged en
i18next: initialized
I18Next initialized! Language: en

It looks like everything is ready for work, but then I get:

======TEST======SeeAllNotifications
i18next::translator: missingKey en app SeeAllNotifications SeeAllNotifications

Translations have been loaded, but don't work. If instead of piece of code #2 use piece of code #1, then everything works fine, but I need to load resources from the backend.

I tried different options, but nothing helped. I would be grateful for the advice.

Maybe this is a bit off topic but how will you update the component when language change? — User 28
@User28 I will use i18next-browser-languagedetector. It will give me a lot of opportunities. I don't use it now because it doesn't matter now. — im1x

User 28 User 28 · Accepted Answer · 2019-05-01T22:06:56

You have to set the resource file without language and namespace, because you already specific lng and ns in loadPath:

{
  "SeeAllNotifications": "a b c",
  "Test2": "Test 2"
}

Or you have to enable allowMultiLoading:

import BackendAdapter from "i18next-multiload-backend-adapter";
import XHR from "i18next-xhr-backend";

i18next
  .use(BackendAdapter)
  .init({
    ...
    backend: {
      backend: XHR,
      backendOption: {
        loadPath: "/locales/resources.json?lng={{lng}}&ns={{ns}}",
        addPath: "/locales/add/{{lng}}/{{ns}}",
        allowMultiLoading: true,
        ...
      }
    }
    ...
  }

Example

I18Next doesn't work when loading data from backend

1 Answers