Issue with react i18next singular and plural, always return plural value

Question

I have some confuse situation with i18next. when i use english language it totally correct. but when I change language to zh, It always return plural value event the value is singular.

I try to upgrade dependencies, change config, but still not working.

I have provided a sample code in the following link.

https://codesandbox.io/s/react-i18next-plurals-forked-jgulw6?file=/public/locales/zh/translation.json

Config

i18n
  .use(Backend)
  .use(initReactI18next)
  .init({
    ns: ["common"],
    defaultNS: "common",
    resources,
    fallbackNS: "en",
    supportedLngs: ["en", "zh"],
    interpolation: {
      escapeValue: false
    },
    react: {
      bindI18n: "loaded languageChanged"
    },
    returnEmptyString: false,
    nsSeparator: false
  });

export default i18n;

Dependencies version:

i18next             21.3.1
intl-pluralrules    1.3.1
react               17.0.0
react-i18next.      11.12.0

Answer 1

It's not a bug, but a feature

Different languages (locales) have different applicable plural suffixes.

You can use only allowed suffixes or i18n fallbacks to another (if existed) namespace.

Read https://www.i18next.com/translation-function/plurals and use (provided by i18next, you can find the link on previous page) https://jsfiddle.net/6bpxsgd4 to check what suffixes your desired language (locale) supports.

For example:

• English (en): _one, _other;
• Chinese (zh): _other;
• Russian (ru): _one, _few, _many.

So you need to keep it in mind, when you provide translation keys. I also encountered similar problem when I tried to use "month_one" and "month_other" for "en" and "ru":

All because "ru" don't support "_other" suffix. The problem is solved when I used just "month" and "month_one" keys.

For you case - Chinese (zh) only supports "_other" suffix (or just dont use suffix at all):

{
  "test": "測試",
  "month_one": "{{ count }} 月" // won't work, because there is no "_one" for "zh"
  "month_other": "{{ count }} 月s" // or "month": "{{ count }} 月s"
}