i18next: Missing translation key error?

I am loading the i18next JS before the Javascript that renders HTML, however sometimes it seems that the translation file isn’t loaded before rendering takes place, and I get an error like:

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

In this example popups.notifications is the key and the correct translation from the file would be “Account Notifications”. This happens for all keys sometimes. The rendering takes place on document load.

My i18 code is:

i18next.use(i18nextXHRBackend).init({
  lng: 'en',
  fallbackLng: "en",
  debug: true,
  backend: {
    loadPath: "/locales/{{lng}}.json"
  }
});