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.

Sign up for GitHub

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

Jump to bottom

Translations are not working when network connection is down #2156

Closed
FustaNivago opened this issue Mar 10, 2024 · 4 comments
Closed

Translations are not working when network connection is down #2156

FustaNivago opened this issue Mar 10, 2024 · 4 comments

Comments

@FustaNivago
Copy link

🐛 Bug Report

I have an ReactJS app and I load the translation files from backend. When internet connection is down (or API does not respond for some reason) translation does not work.

To Reproduce

Run the application, at some point disable internet connection (make backend unreachable) - you will get an keys instead of values.
Here is my configuration:

i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init<HttpBackendOptions>({
    ns: [],
    defaultNS: undefined,
    fallbackLng: 'uk',
    debug: false,
    load: 'languageOnly',
    partialBundledLanguages: false,

    interpolation: {
      escapeValue: false,
    },

    initImmediate: false,

    backend: {
      loadPath: `${import.meta.env.VITE_API_BASE_URL}/media/GetLocalization?c={{lng}}&d=${new Date().getMonth()}- ${new Date().getDate()}`,
    },
  });

Even though i18next was inited before and i18next.store has the data it does not work

image

Expected behavior

Temporary connection issues should not affect i18next, at least until language is switched.

My Environment

  • runtime version: i.e. node v18.12.1
  • i18next version: 23.8.2
  • os: Windows
@adrai
Copy link
Member

adrai commented Mar 10, 2024

it will only work if the translations have been preloaded (all required namespaces)....
alternatively have a look at: https://www.i18next.com/how-to/caching
or: https://www.i18next.com/how-to/backend-fallback

@FustaNivago
Copy link
Author

it will only work if the translations have been preloaded (all required namespaces).... alternatively have a look at: https://www.i18next.com/how-to/caching or: https://www.i18next.com/how-to/backend-fallback

Thank you for the response. In my case I don't have any namespaces, there is only one json "file" which obviously has been loaded before any connection issues... I thought it should work offline. Regarding the cache - it is not an option for me, as the application is supposed to have an updates quite often.

@adrai
Copy link
Member

adrai commented Mar 10, 2024

If the translations are loaded there should be no additional request and the translations should work...
If that's not the case, please provide a minimal reproducible example.

@FustaNivago
Copy link
Author

Was unable to respond earlier.
My bad, the issue was in
import { t } from 'i18next';
I didn't notice missing useTranslation hook.
Thank you for your patience)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@adrai @FustaNivago