Search code examples
reactjsi18nextreact-i18next

i18next plurals using count returned an object instead of string


Trying to figure out plurals with i18next-react. I must be missing something really obvious. I get the error Results in key 'generic.rule-group (en)' returned an object instead of string.

Thanks in advance

resources.json

{
  "en": {
    "default": {
      "generic.rule-group": {
        "one": "Rule group",
        "other": "Rule groups"
      }
    }
  }
}

jsx

import React from 'react';
import { useTranslation } from 'react-i18next';


export const Test = () => {
  const { t } = useTranslation()

  // Results in key 'generic.rule-group (en)' returned an object instead of string.
  return <h1>{t('generic.rule-group', { count: 1 })}</h1>
}

i18next-config.js

i18next
  .use(initReactI18next)
  .init({
    ns,
    fallbackNS: 'default',
    defaultNS: ns,
    lng: 'en',
    fallbackLng: 'en',
    resources,
    keySeparator: false,
    interpolation: {
      escapeValue: false,
    },
  })
  .catch(error => {
    console.log(error);
  });

Solution

  • According to the documentation, I think the resources json keys should be:

    {
      "en": {
        "default": {
          "generic.rule-group": "Rule group",
          "generic.rule-group_plural": "Rule groups"
          }
        }
      }
    }