Number vars passed as Trans children are not processed correctly

[vasiliy-l]

🐛 Bug Report

When passing number translation vars as children of <Trans> component, the values cannot be properly formatted. Then passing the values as vars prop of the component, the numbers are formatted as expected.

The bug appears in react-i18next version 14.0.7 and above. Probably, related to the fixes for #1729

To Reproduce

https://codesandbox.io/p/sandbox/react18next-trans-child-number-vars-not-formatted-cdx4f2

i18n.use(initReactI18next).init({
  resources: {
    en: {
      translation: {
        "trans-key-with-number-var": "Treat value as number: {{foo, number}}",
      },
    },
  },
 // ...
});

...

<Trans t={t} i18nKey="trans-key-with-number-var" values={{ foo: 1234 }} />
// OK
// > Treat value as number: 1,234

<Trans t={t} i18nKey="trans-key-with-number-var">
   {{ foo: 1234 }}
</Trans>
// Number value cannot be parsed properly:
// > Treat value as number: NaN

Expected behavior

Values passed as <Trans> children are expected to be formatted properly.

Your Environment

• i18next version: i.e. 23.11.5
• react-i18next version: 14.0.7

[adrai]

@stefan-schweiger unfortunately @vasiliy-l is right... I've now released v14.1.2 that may work for both use cases... but if this gets issues in future, we need to revert https://github.com/i18next/react-i18next/issues/1729 completely