html – Do I need i18next-xhr-backend for using translations in separated json files?

I’m using i18next in a pure html website.

Here is error message:

i18next::translator: missingKey en translation title title

Here is the code:

 ///multilng.js
(function () {


i18next
.init({
    "debug": true,
    "lng": "en",
    "ns": [
      "translation"
    ],
    "fallbackLng": false,
    "keySeparator": false,
    "nsSeparator": false,
    resources: {
      "backend": {
        "loadPath": "../locales/{{lng}}/{{ns}}.json"
      }
    }
  }, function(err, t) {
   console.log(err);
 });

  function changeLng(lng) {
    i18next.changeLanguage(lng);
  }

  i18next.on('languageChanged', () => {
    updateContent();
  });

  updateContent();
})();

function updateContent() {
  var title = i18next.t("title");
  $("#logo.dark-logo").html(title);
}

Here is the project structure:

enter image description here

Here is how I reference the js files:

<script type='text/javascript' src="http://stackoverflow.com/js/vendor/jquery-1.12.4.min.js"></script>
<script type='text/javascript' src="js/vendor/i18next.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-i18next/1.1.0/jquery-i18next.min.js"></script>
<script type='text/javascript' src='js/i18nextXhr.js'></script>
<script type='text/javascript' src='js/main.js'></script>
<script type='text/javascript' src='js/multilng.js'></script>

Here is the content of a translation.json:

{
    "title":"My Studio",
    "slogan":"Your expert."
}

Loading...

(Visited 10 times, 1 visits today)