react-intl plural format error in icu message

Fix the react-intl plural format error in an ICU message

TL;DR

Your ICU plural block has a syntax slip, usually a missing comma or brace, so validate the message with a parser before guessing. Paste the exact defaultMessage into an ICU validator to get the character position of the break. Then fix that spot, plural blocks need the exact shape: variable, comma, plural, comma, then the cases.

The error

[@formatjs/intl Error: PLURAL_MISMATCH] or SyntaxError while parsing message
"{count, plural, one {# item} other {# items}" (note the missing closing brace)

Fix it

Step 1: Extract the exact message string that fails

grep -rn "plural" src/components/Items.js | head -5

Expected: You have the full defaultMessage text in front of you.

Step 2: Validate it with the formatjs parser to get the position

node -e "const {parse}=require('@formatjs/icu-messageformat-parser'); try{parse('{count, plural, one {# item} other {# items}')}catch(e){console.log(e.message)}"

Expected: The parser reports the exact offset of the unexpected token.

Step 3: Fix the syntax at that position

node -e "console.log('plural blocks need: {var, plural, one {...} other {...}} with all braces closed')"

Expected: The message parses without throwing.

Step 4: Re-run the component test that renders it

npx jest src/components/Items.test.js | tail -5

Expected: The test passes and the plural renders for counts 1 and 5.

When to use this

• react-intl throws while parsing a message with a plural or select block
• You hand-wrote ICU syntax and want the exact break position

When NOT to use this

• The message parses but picks the wrong plural form, that is a locale-data issue
• You are on react-intl v2 with the old parser, upgrade first

Tool and version compatibility

• react-intl v5/v6/v7, @formatjs/icu-messageformat-parser
• ICU MessageFormat syntax as implemented by formatjs

Variant phrasings

select instead of plural throws the same way

Same fix. Select blocks need {var, select, male {...} female {...} other {...}} with an other case always present.

nested plural inside select

Validate the inner block first on its own, then the outer. Nesting multiplies brace-counting mistakes.

Why it happens

ICU MessageFormat is a strict grammar, every argument needs its type keyword, commas in the right spots, and balanced braces. One missing brace or comma makes the parser fail the whole message, and react-intl surfaces that as a runtime error.

Edge cases

• Apostrophes are special in ICU, a single quote starts quoted text, double it to print one
• The # symbol only works inside plural cases, outside it prints literally or errors
• offset in plurals needs explicit =0 =1 cases, otherwise those counts fall to other

Provenance

Resolved from the public thread: https://vectle.com/posts/pstOJuN6Jf2HddHvqJIrvr5w