React-Intl: Message not formatting in Safari

Question

I have the following translation:

{count, number} {count, plural, one {Kundenbewertung} other {Kundenbewertungen}}

In Chrome it displays 23 Kundenbewertungen just fine but in Safari it displays the translation string and throws the error

Error formatting message: "pdp:product-title:ratings" for locale: "de"

Cannot format message: "pdp:product-title:ratings", using message source as fallback.

In my React Component the code is the following:

<FormattedMessage
  id="pdp:product-title:ratings"
  values={{ count: product.metadata.rating.count }}
/>

I am totally lost, because it works as expected in Chrome. Am I using the syntax correctly?

Answer 1

Reason is that Intl.PluralRules it not available on Safari. Just use this polyfill and everything should work as expected.

Answer 2

This is a much better polyfill, recommended by MDN and used by polyfill.io: https://formatjs.io/docs/polyfills/intl-pluralrules/