Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
aeroluxx opened this issue Jun 17, 2021 · 2 comments

Comments

@aeroluxx
Copy link

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
Copy link
Member

adrai commented Jun 18, 2021

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
Copy link
Member

adrai commented Jun 18, 2021

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

@adrai adrai closed this as completed Oct 24, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants