i18next / i18next-chained-backend

An i18next backend to chain multiple backends (add fallbacks, caches, ...)
MIT License
69 stars 10 forks source link

Translation from the BE does not come if the language of local translations matches the language in the browser settings #21

Closed aeroluxx closed 2 years ago

aeroluxx commented 3 years ago

Hi, I need to load local strings by default, and merge with strings from BE. As fallback strings I store locally strings in English.

if the user has 'de' in the browser settings, but there are no 'de' strings on BE, then I use local fallback strings - 'en'. If there is, then I load it from BE. If there is a translation to BE, but not completely, and there are keys that are missing - for the missing keys, I want to use fallback strings.

The Problem is that when the browser language is 'en' (matches the language of the fallback strings), then the plugin doesn't load 'en' from BE and doesn't merge the strings. But if the browser language is 'es' then es-strings will be loaded from BE, and if some 'es' strings are missing, then instead of them I will see strings in English.

-- Browser Chrome, 91.0.4472.101 Mac Os 11.2.3

I have a config i18

import i18n from 'i18next'
import ChainedBackend from 'i18next-chained-backend'
import Backend from 'i18next-http-backend'
import resourcesToBackend from 'i18next-resources-to-backend'
import { initReactI18next } from 'react-i18next'

import resources from 'src/translations/resources'

const localeDetector = () => {
  const locale = window.navigator.language
  if (locale.match(/^en(.)*/)) {
    return 'en'
  }
  if (locale.match(/es(.)*/)) {
    return 'es'
  }
  if (locale.match(/ru(.)*/)) {
    return 'ru'
  }

  return 'en'
}

const options = {
  backends: [resourcesToBackend(resources), Backend],
  backendOptions: [
    {},
    {
      loadPath: 'https://rightway-translation.s3.amazonaws.com/{{lng}}.json',
      crossDomain: true,
    },
  ],
}

i18n
  .use(ChainedBackend)
  .use(initReactI18next)
  .init({
    lng: localeDetector(),
    getAsync: true,
    supportedLngs: ['en', 'es'],
    returnEmptyString: true,
    artialBundledLanguages: true,
    react: {
      useSuspense: true,
    },
    debug: true,
    backend: options,
    fallbackLng: 'en',
    interpolation: {
      escapeValue: true,
    },
  })

export default i18n
adrai commented 3 years ago

I don't understand what you want to do... Please provide a full reproducible example.

btw: artialBundledLanguages is wrong there should be a p -> partialBundledLanguages

You may not need chained-backend: https://stackoverflow.com/questions/59293416/loading-translation-files-on-demand

adrai commented 3 years ago

btw if you want to merge translations of the same namespace from different backends, this is not possible.