i18next / react-i18next

Internationalization for react done right. Using the i18next i18n ecosystem.
https://react.i18next.com
MIT License
9.32k stars 1.03k forks source link

Not all namespaces are loaded when passing the `lng` option to useTranslate #1809

Closed pvdstel closed 2 weeks ago

pvdstel commented 2 weeks ago

πŸ› Bug Report

When passing the same value in the lng prop to the options of useTranslation with different namespaces, only one namespace is loaded. This causes the Suspense fallback to be shown forever, as i18next never attempts to load other namespaces. The behavior is related to this section of code, where it notices that lng is set, and only attempts to load the language. While debugging, I found that i18next notices that it does not need to load new languages, so it bails out early, even if more namespaces should be loaded.

Note that the translations are loaded lazily.

Unexpected behavior:
unexpected-behavior

I would like to note that the problem still occurs when useSuspense is disabled, but then it appears to be a race condition as to which files are loaded and which are not. It does not trigger Suspense, but the translations simply are not ready.

unexpected-race

To Reproduce

Repository: https://github.com/pvdstel/react-i18next-forced-language-unexpected-suspense

The file src/fixedLanguage.ts contains a value which can be toggled for demonstrating the unexpected behavior. This value controls whether the value passed to the lng option is 'en' or undefined. When undefined is passed, the behavior is as if lng is not set, giving the expected results. But if we set lng to 'en', only the first translation is ever loaded in.

To run:

pnpm install
pnpm dev

Then follow the instructions in the terminal as Vite has launched a development server.

Expected behavior

I expect all required namespaces to be loaded in, and for the Suspense to disappear eventually:
expected-behavior

Simply asking i18next to provide a specific language shouldn't cause namespaces to not load in.

Your Environment

adrai commented 2 weeks ago

Can you try with v15.1.1 ?

pvdstel commented 2 weeks ago

That version works, both in the minimal example and in the larger application. Thank you! πŸ˜„

adrai commented 2 weeks ago

If you like this module don’t forget to star this repo. Make a tweet, share the word or have a look at our https://locize.com to support the devs of this project.

There are many ways to help this project πŸ™