Why, in case of an error in the url, local translations are not loaded?

[gHashTag]

Why, in case of an error in the url, local translations are not loaded?

My settings:

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 { currentLocale } from 'src/utils/helpers'

import resources from './src/translations/resources'

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

const customI18nextReactNative = () => ({
  init: Function.prototype,
  async: true,
  type: 'languageDetector',
  cacheUserLanguage: Function.prototype,
  detect: () => {
    if (currentLocale.match(/^en(.)*/)) {
      return 'en'
    }
    if (currentLocale.match(/es(.)*/)) {
      return 'es'
    }
    if (currentLocale.match(/ru(.)*/)) {
      return 'ru'
    }
    return 'en'
  },
})

i18n
  .use(ChainedBackend)
  .use(customI18nextReactNative())
  .use(initReactI18next)
  .init({
    getAsync: true,
    supportedLngs: ['en', 'es'],
    nonExplicitSupportedLngs: true,
    react: {
      useSuspense: false,
    },
    // debug: true,
    lng: currentLocale,
    backend: options,
    keySeparator: '.',
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false,
    },
  })

export default i18n

example broken url:

loadPath: 'https://tran1slation.rightwayhealthcare.com/{{lng}}.json',

As I do in this case, the local translation should be connected, but it doesn't.

Where am I going wrong?

[adrai]

Here it seems to work: https://github.com/i18next/i18next-http-backend/blob/master/example/fallback/app.js

So please provide a full reproducible example.

[gHashTag]

Your example is on the server, and I'm solving the problem in a React Native mobile app. The example is complete and there is nothing to add.

[adrai]

Sorry, I can't reproduce your issue...

What is the log saying whe setting debug to true?

[adrai]

btw: your url seems not to be broken to me: example with en => https://translation.rightwayhealthcare.com/en.json

[gHashTag]

Yes, a worker, but if I break it like this

https://transl1ation.rightwayhealthcare.com/en.json

then local translation is not connected

[adrai]

Just tested with that url too: "https://transl1ation.rightwayhealthcare.com/en.json"

it works for me.

Please share at least the debug log.

I can't help you, without more information or a reproducible example.

[gHashTag]

Is this information enough?

Also, when I change the locale, I do not boot the Spanish language.

[adrai]

the first line in your screenshot shows the translations of en are loaded
and the next line shows the language is switched to es

Is there any error before this?

Is it possible you're not waiting for the translations to be loaded? When not using Suspense, you need to wait for the ready flag to be true before rendering:
https://react.i18next.com/latest/usetranslation-hook#not-using-suspense
https://react.i18next.com/latest/withtranslation-hoc#not-using-suspense

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[NeRo8]

Disable RN Debugger. Plugin don't work if RN Debugger enabled.

[mattiasnixell]

I bumped into this issue today as well, I was banging my head against the wall until I found your comment @NeRo8 (thanks!!!). Disabling RN debugger did the trick, but that's not an acceptable solution. In my case, I'll revert to i18next-xhr-backend, which works with RN debugger as well. It seems to be a common issue with fetch API and RN debugger (facebook/react-native#24627).

Would it be reasonable to be able to opt-out of fetch API and use the XMLHttpRequest fallback only? @adrai

[adrai]

Would it be reasonable to be able to opt-out of fetch API and use the XMLHttpRequest fallback only? @adrai

If I understood correctly this will never happen in a "productive" environment. It's just a debug/dev issue.
Can't this be fixed at the root of the causing issue? react-native debugger?

[mattiasnixell]

Yea, this is only an issue during development. I'm not sure we'll see the light for a fix with the debugger in any near future, it seems pretty complicated... Anyway, you're probably right, shouldn't try to "fix" it from this repository.

I noticed the "request" option, does that completely replace fetch with a custom function? If yes, I could utilize that to implement a client that works with react native debugger.

[adrai]

I noticed the "request" option, does that completely replace fetch with a custom function? If yes, I could utilize that to implement a client that works with react native debugger.

Yes