Migration 10.x 11.x and combining i18next-chained-backend & i18next-multiload-backend-adapter

[Klemele]

Hello there,

Nice work you done here ;)

Just tried to migrate from a 10.x to 11.x and got issue when coupling i18next-multiload-backend-adapter && i18next-chained-backend and couldn't make it.

Notes

First a little typo in backendOptions:

i18next-multiload-backend-adapter	i18next-chained-backend
backend~s~: BackendSupportingMultiload	backends: [],
backendOption~s~: { }	backendOptions: []

But seems more complex than just a name refactor ;)

Details

i18n plugins:

• i18next-chained-backend
• i18next-multiload-backend-adapter
• i18next-localstorage-backend
• i18next-xhr-backend

When tried to mixing both with duplication of options, I got multiple error on missing key on the first language I'm preloading. Like only the first language load is preserved and the following doesn't matter.

So would love to got any example working.

Thanks !

[jamuhl]

Where do i have that s in multiload mentioned...? https://github.com/i18next/i18next-multiload-backend-adapter#backend-options

Could you paste your config?

[Klemele]

No actually you don't, that what I meant. In one plugin config there is the S and the other no, is that intended ?

I rolled back actually, hence me asking for an example :)

Will redo and send you the code.

[jamuhl]

yes

chained -> n backends: more than one backends eg. first cache then xhr multiload -> wrappes only 1 backend: legacy support for backends having option to load resources in one file (eg. xhr + express-middleware combo)....instead per language-namespace pair

[Klemele]

Didn't have time to repoduce it, so I close this issue and will reopen it when I do the work ;)

[ljosberinn]

Turns out, I'm having this issue now. This is my config:

import i18n from 'i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import { initReactI18next } from 'react-i18next';
import XHR from 'i18next-xhr-backend';
import BackendAdapter from 'i18next-multiload-backend-adapter';
import LocalStorageBackend from 'i18next-localstorage-backend';
import Backend from 'i18next-chained-backend';

i18n
  .use(BackendAdapter)
  .use(Backend)
  .use(initReactI18next)
  .use(LanguageDetector)
  .init({
    fallbackLng: 'en',
    debug: process.env.NODE_ENV === 'development',
    interpolation: {
      escapeValue: false, // not needed with react
    },
    detection: {
      lookupLocalStorage: 'languagePreference', // key to store in
      caches: ['localStorage'], // where to cache
      order: ['localStorage', 'navigator'], // in which order to search for a language
    },
    backend: {
      backends: [LocalStorageBackend, XHR], // order defines lookup pattern
      backendOptions: [
        { prefix: 'i18next_translation_' },
        {
          loadPath: '.netlify/functions/locales?lng={{lng}}&ns={{ns}}',
          allowMultiloading: true,
        },
      ],
    },
    ns: [], // removes 'translation' default key from backend query,
    react: {
      wait: false,
    },
  });

Just to be sure, this means my backend has to accept only language+namespace pairs instead of being able to load multiple languages and/or namespaces at the same time because this is a intended limitation of multiload-backend-adapter?

[jamuhl]

@ljosberinn using multiload is possible...just wrap the xhr backend correctly with it...https://github.com/i18next/i18next-multiload-backend-adapter#more-complete-sample

[ljosberinn]

Thanks, that did it. For further reference:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import Backend from 'i18next-chained-backend';
import XHR from 'i18next-xhr-backend';
import BackendAdapter from 'i18next-multiload-backend-adapter';
import LocalStorageBackend from 'i18next-localstorage-backend';

i18n
  .use(Backend)
  .use(initReactI18next)
  .init({
    backend: {
      backends: [
        LocalStorageBackend,
        new BackendAdapter(null, {
          backend: new XHR(null, {
            loadPath: '.netlify/functions/locales?lng={{lng}}&ns={{ns}}',
            allowMultiloading: true,
          }),
        }),
      ], // order defines lookup pattern
      backendOptions: [{ prefix: 'i18next_translation_' }, {}],
    },
  });

[jamuhl]

If you like this module don’t forget to star this repo. Make a tweet, share the word or have a look at our https://locize.com to support the devs of this project.

If you liked my support / work - I would enjoy a coffee sponsored using the “:purple_heart:Sponsor Button”.

There are many ways to help this project :pray: