Missing key in i18next translation

Question

I am using http://i18next.com/ for multi-language support in my Javascript app.

However, I am running into an issue where, presumably, the Javascript that renders HTML is loaded before the file i18next uses to find translations, and instead of the translation text, I get an error.

For example, for a key-translation pair of "popups.notifications":"Account Notifications" I'll get:

i18next::translator: missingKey undefined translation popups.notifications popups.notifications

The i18next JS is included in the page header before any other Javascript, but it makes no difference.

How do I make sure the translation file is loaded before any HTML rendering takes place?

Answer 1

I had the same problem with using i18n-fetch-backend with the following config:

.init({
  ...
  backend: {
    loadPath: "somePatch",
    parse: (data) => {console.log(data)}
  }
})

Removing the parse attribute solved it for me.