i18next: Problem using XHR backend with jquery-i18next

I’ve been having a lot of trouble getting i18next to work when using the XHR backend and jquery-i18next. I can get i18next + jquery-i18next to work when I add the translations as JSON to the page, but I need to have the translations in files. I get the same error for each key: i18next::translator: missingKey undefined translation [key]. My test en-US.json file is being successfully loaded. How do I handle this problem?

Here’s the code I’m using:

i18next.use(window.i18nextXHRBackend)
.init({
	debug: true,
	whitelist: ['en-US', 'es'],
	fallbackLng: 'en-US',
	backend: {
		loadPath: 'langs/{{lng}}.json'
	}
}, (err, t) => {		
	jqueryI18next.init(i18next, $);
	$(document).localize();
});

Thanks in advance.

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 24 (11 by maintainers)

Most upvoted comments

I was using incorrect key. I forgot to change it after making changes for “allowMultiLoading: true”. it is working with the suggestions you made. Thanks for you help!

sapnavyas on Mar 14, 2018

“i18next::translator: missingKey undefined translation key” looks like you call t(undefinded) can you paste your complete sample or create a jsbin?

jamuhl on Mar 14, 2018

you server needs to return the same as you pass in resources.en.translation and you can’t have the route omitting the language and namespace -> it needs to load one file per language and namespace pair.

means /api/Locales/en/translation should return

{
  "key": "hello world"
}

if you like to load all translations in all languages via /api/Locales (not recommended as you load to much) you can set allowMultiLoading: true in backend options https://github.com/i18next/i18next-xhr-backend and json has to look like:

en: {
translation: {
"key": "hello world"
}
}

jamuhl on Mar 10, 2018

Okay, that fixed it. Thanks for all your help.

miyakoj on Apr 17, 2017

change your json to:

{
			"header": {
				"greeting": "Hello World!"
			},
			"main": {
				"content": "This is my content."
			},
			"footer": {
				"desc": "This is a i18next test page."
			}
		}

The loading route already has the language and namespace set - so no need to provide that in json files

jamuhl on Apr 12, 2017

Well, here’s the entire HTML page:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test Page</title>
</head>

<body>
<header><h2 data-i18n="header.greeting"></h2></header>
<main><p data-i18n="main.content"></p></main>
<footer><p data-i18n="footer.desc"></p></footer>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="js/i18next.min.js"></script>
<script type="text/javascript" src="js/jquery-i18next.min.js"></script>
<script type="text/javascript" src="js/i18nextXHRBackend.min.js"></script>
<script type="text/javascript" src="js/i18nextBrowserLanguageDetector.min.js"></script>
<script type="text/javascript" src="js/i18nextLocalStorageCache.min.js"></script>

<script>
i18next.use(window.i18nextXHRBackend)
.init({
	debug: true,
	whitelist: ['en-US', 'es'],
	fallbackLng: 'en-US',
	backend: {
		loadPath: 'langs/{{lng}}.json'
	}
}, (err, t) => {		
	jqueryI18next.init(i18next, $);
	$(document).localize();
});
</script>
</body>
</html>

And here’s the structure of the language file:

{
	"en-US": {
		"translation": {
			"header": {
				"greeting": "Hello World!"
			},
			"main": {
				"content": "This is my content."
			},
			"footer": {
				"desc": "This is a i18next test page."
			}
		}
	}
}

miyakoj on Apr 11, 2017