Getting i18next translator Missing key

Aditya Tomar picture Aditya Tomar · Mar 2, 2017 · Viewed 11.5k times · Source

This is my first time with i18next and I have no idea how to make it work. (it seems like the documentation is incomplete to me) This is my HTML code with i18next

<html>   
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/i18next/4.0.0/i18next.min.js" ></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-i18next/1.1.0/jquery-i18next.min.js"></script>
    <script src="/i18nextXHRBackend.min.js"></script>   
  </head>

  <body>
      <div id="test">
        <a data-i18n="Hello"></a>
        <div data-i18n="World"></div>
      </div>

      <script>
        i18next
            .init({
                "debug": true,
                "lng": "en",
                "ns": [
                  "translation"
                ],
                "fallbackLng": false,
                "keySeparator": false,
                "nsSeparator": false,
                resources: {
                  "backend": {
                    "loadPath": "locales/{{lng}}/{{ns}}.json"
                  }
                }
              }, function(err, t) {
               jqueryI18next.init(i18next, $);
               $('#test').localize();
             });
      </script>
  </body>  
</html>

And this is my JSON:

{ "Hello" : "Hello in english", "World" : "World in english" }

Nothing display in my page, In console I have got this

i18next::translator: missingKey en translation Hello

i18next::translator: missingKey en translation World 

Am I missing anything?

Answer

jamuhl picture jamuhl · May 9, 2017

if you get missing that's a sign for the translations in your json file where not loaded at all.

there should be warnings about backend not able to load those in the console.

make sure: locales/en/translation.json is accessible - or fix the path accordingly