I18next load translation with locally with bundled translation files

Question

Is there a way for me to load translations from a translation json files bundled with my js files?

I only have a few languages to cover, and due to restrictions setting up a backend endpoint is not possible.

I am aware of the addResourceBundle function, but have been unsuccessful in doing so.

I have translation file english.json, spanish.json

i18next.init();
i18next.addResourceBundle('en', 'translation', english.json);
i18next.addResourceBundle('es', 'translation', spanish.json);

Doesn't seem to work.

Answer 1

In order to bundle your translation files with the js code, you need to add them to the dependency tree of your app.

I guess that you are using webpack, you need to define a loader for json imports (json-loader).

i18next.init({
  resources: {
    'en-US': {translation: require('./en-us/translation.json')},
    // ---------^ namespace
    'nl-NL': {translation: require('./nl-nl/translation.json')},
  },
  fallbackLng: 'en-US',
  ns: ['translation'],
  defaultNS: 'translation',
});