CODEWITHSUNDEEP
reactjsreact-intl
mxmtsk
mxmtsk

Reputation: 4685

React-Intl: Message not formatting in Safari

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?

Upvotes: 7

Views: 2400

Answers (2)

Janne Annala
Janne Annala

Reputation: 28737

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

Upvotes: 4

Yuriy Yakym
Yuriy Yakym

Reputation: 3921

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

Upvotes: 6

Related Questions