Missed backends in this.options within init

[newsiberian]

Hi, I'm receiving the following:

It happens here:

The config is the same as in the example: LocalStorageBackend, XHR

[jamuhl]

Can you paste your i18next init call?

backends should be defined when initializing correctly, like eg. in the localstorage-backend: https://github.com/i18next/i18next-localstorage-backend#getting-started

i18next
  .use(Backend)
  .init({
     backend: {
       // array of existing i18next backends from https://www.i18next.com/plugins-and-utils.html#backends
       backends: [],

       // array of options in order of backends above
       backendOptions: []
}
});

[newsiberian]

here:

i18n
  .use(Backend)
  // .use(XHR)
  .use(reactI18nextModule)
  .init({
    ...i18nOptions,

    // backend: {
    //   loadPath: '/locales/{{lng}}/{{ns}}',
    //   ajax: loadLocales,
    // },
    backend: {
      backends: [
        // primary
        LocalStorageBackend,
        // fallback
        XHR,
      ],
      backendOptions: [{
      // options: [{
        // prefix for stored languages
        prefix: 'i18next_res_',

        // expiration
        expirationTime: 7 * 24 * 60 * 60 * 1000,

        // language versions
        // load from config
        versions: { en: 'v0.1', ru: 'v0.1' },
      }, {
        // xhr load path for my own fallback
        loadPath: '/locales/{{lng}}/{{ns}}',
        ajax: loadLocales,
      }],
    },
  });

and i18nOptions are:

export default {
  // Hardcoded Google Cloud Translation API supported languages
  // this is an output of `languages` query, so it could be updated easily
  // fetched in may 2017
  whitelist: [
    'af',
    'sq',
   ...a long list here
  ],
  fallbackLng: 'ru',

  // have a common namespace used around the full app
  ns: ['common'],
  defaultNS: 'common',

  debug:
    process.env.BUILD_FLAG_IS_CLIENT === 'true' &&
    process.env.BUILD_FLAG_IS_DEV === 'true',

  interpolation: {
    // not needed for react!!
    escapeValue: false,
    // format: (value, format) => {
    //   if (format === 'bold') {
    //     // return <b>value</b>;
    //     return value.bold();
    //   }
    //
    //   return value;
    // }
  },

  react: {
    // With this some components are blinking
    // set to true if you like to wait for loaded in every translated hoc
    wait: false,
    // set it to fallback to let passed namespaces to translated hoc act as fallbacks
    nsMode: 'default',
  },
};

[jamuhl]

my fault, update:
[email protected]
[email protected]

[newsiberian]

Cool, thanks, now works as expected even better.

Btw, do you know that turning on react.wait option leads to components blinking on initial frontend part rendering if ssr used?

[jamuhl]

should not be the case if passing down the initialI18nStore like in the samples: https://github.com/i18next/react-i18next/blob/master/example/razzle-ssr/src/server.js#L47

same for next.js: https://github.com/zeit/next.js/blob/canary/examples/with-react-i18next

that gets loaded and wait gets overridden: https://github.com/i18next/react-i18next/blob/master/src/I18n.js#L18