react-i18next:: i18n.languages were undefined or empty

[AlemTuzlak]

🐛 Bug Report

I was implementing react-i18next in Remix and I got the error from the title. I guess this isn't technically a bug but I wanted to check with you guys if it made sense to change the behavior a bit or warn the user of the error. What happened is that I had setup everything properly and I by accident set the fallbackLng to be something other than the supportedLngs. Namely, I set the fallbackLng to be en_GB instead of en-GB which silently failed and resulted in the error above in the browser and the server. I switched it to the correct locale and it worked.

I would like to check if you would be open to just adding something like a log message saying "The fallback language you provided does not exist in your supported languages" just to maybe help people in the future who face the same issue

To Reproduce

detection: {
  supportedLanguages: ["en", "de"],
  fallbackLanguage: "random",
},

Expected behavior

Get at least a console log that it doesn't exist in the supportedLanguages

Your Environment

• runtime version: node 22
• i18next version: 23.13.0
• os: Windows
• any other relevant information

[adrai]

Yes, we're open for such a warning message...
something like: https://github.com/i18next/i18next/blob/master/src/i18next.js#L163
feel free to provide a PR in the i18next repository...

[bombillazo]

We are getting this error when the page starts up in Firefox, but we have no idea why. It works fine in Chrome. Here are our init values:

  .init<LocizeBackendOptions>({
    backend: {
      apiKey: locizeConfig.apiKey,
      projectId: locizeConfig.projectId,
    },
    cleanCode: true,
    fallbackLng: 'en',
    keySeparator: false,
    nonExplicitSupportedLngs: false,
    react: {
      useSuspense: false,
    },
    saveMissing: true,
    saveMissingTo: 'current',
  })

[adrai]

@bombillazo can you create a minimum reproducible example repository (best without i18next backend)

[bombillazo]

I can't reproduce it. I can see it in our staging app in vercel when entering from Firefox.

[bombillazo]

@adrai is there any way to contact you directly to see if you can help us by giving you some access to our app? We're also paying locize

[adrai]

Since you use the locize backend, you can send a link to your website to [email protected] explaining the issue...

[bombillazo]

@adrai I found the issue. Even though the useTranslation() hook typing for the i18n prop is not set to be potentially undefined in reality, for FireFox, the object could be indeed undefined at some point during the init of the lifecycle, and we where trying to use a function on an undefined object:

  import { useTranslation } from 'react-i18next';

  const { i18n } = useTranslation();
  const currentLocale = i18n.language.startsWith('en') ? 'en' : 'es';

To fix it we used optional chaining (?) and the code worked again!

  import { useTranslation } from 'react-i18next';

  const { i18n } = useI18nextTranslation();
  const currentLocale = i18n.language?.startsWith('en') ? 'en' : 'es';