Getting i18next translator Missing key
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
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