Render Error: Cannot read property 'fn' of undefined in intl-pluralrules

[shekhar-nst]

Version

5.26.2

Describe the bug

We encountered a render error in our React Native app that appears to be related to intl-pluralrules. The error occurs during the rendering of a component and is triggered while resolving plural rules for translations.
The app crashes with a render error related to intl-pluralrules.

Additional Context:

• We already have the polyfills in src/polyfill/Intl.ts
• The issue seems related to the pluralization logic in the translation system.

import { type BaseTranslation } from '../i18n-types'

const en_US = {
    daysLeft: '{days} {{day left|days left}}',
} satisfies BaseTranslation

export default en_US

Reproduction

Steps to Reproduce:

• Run the app on a React Native environment.
• Navigate to the screen containing the Text component which has plural rules.
  Observe the crash with the error message:
  "Cannot read property 'fn' of undefined"

Logs

Config

Additional information

No response

[nsab1n]

In case you haven't fixed this yet, I had the same problem and fixed it by importing locale-data as well (ref), eg:

import "@formatjs/intl-pluralrules/polyfill";
import "@formatjs/intl-pluralrules/locale-data/en";
import "@formatjs/intl-pluralrules/locale-data/fr";

Where I think one locale-data is needed for each locale your app supports.