Fallback key for <Trans> does not match react-i18next fall back key when using interpolation.

[kholland950]

🐛 Bug Report

Context: We are using the message value as the fallbackKey:

fallbackKey: function (ns, value) {
  return value
}

When using the Trans component from react-i18next, the fallback key that i18next-scanner generates does not match the fallback key used by react-i18next. This results in missing keys when using fallback keys in message files.

To Reproduce

<Trans>I have {{numberOf}} dogs</Trans>

react-i18next fallback key: I have {{numberOf}} dogs
i18next-scanner fallback key: I have <2>{{numberOf}}</2> dogs

<Trans>There are <strong>{{numberOfResults, number}}</strong> results</Trans>

react-i18next fallback key: There are <2>{{numberOfResults, number}}</2> results
i18next-scanner fallback key: There are <2><0>{{numberOfResults}}</0></2> results

react-i18next seems to have handled this with an if-statement in their implementation of nodesToString
https://github.com/i18next/react-i18next/blob/master/src/Trans.js#L75-L82

I found what I believe is the same condition in i18next-scanner's implementation of nodesToString
https://github.com/i18next/i18next-scanner/blob/master/src/nodes-to-string.js#L57-L58

Expected behavior

The fallback keys and nodes-to-string functionality should match the functionality in react-i18next.

Your Environment

• runtime version: node v14 (scanner), all browsers (react-i18next)
• i18next version: >=19.5.0
• os: Mac

[zzacharo]

Any status update or workaround on this?

[kholland950]

@zzacharo I no longer have access to the code base where I was experiencing this issue (changed jobs).

I believe our workaround was to pass an i18nKey to all usages of the Trans component:

<Trans i18nKey='my-message'>There are <strong>{{numberOfResults, number}}</strong> results</Trans>

[zzacharo]

@kholland950 thanks a lot for your answer! I am experimenting with using the below approach

<Trans
    defaults="On <bold>{{ date }}</bold> the record will automatically be made publicly accessible."
    values={{ date: myDate }}
    components={{ bold: <b /> }}
  />

and the extraction seems not to try to guess the indexes so it produces something similar to
On <bold>{{ date }}</bold> the record and the files will automatically be made publicly accessible.

Do you recall maybe trying this approach? Any limitations?