react-intl Error: [React Intl] Cannot format message, using message id as fallback

react-intl Error: [React Intl] Cannot format message, using message id as fallback

TL;DR

Fixes the react-intl warning where a message's ICU syntax is broken, so the raw id renders. Repair the ICU placeholders or braces in that message. Use when the console names a message that renders as its id. Not for messages missing from the dictionary.

The error

Error: [React Intl] Cannot format message: "{count, plural, one {# item} other {# items}", using message id as fallback.

Fix it

Step 1: Copy the failing message

grep -rn "cart.count" src/locales/en.json | head -3

Expected: You have the exact ICU string that fails to format.

Step 2: Validate the ICU syntax

node -e "console.log('check every opening brace has a matching close and plural cases are complete')"

Expected: You spot the malformed placeholder or missing closing brace.

Step 3: Fix the message and re-render

node -e "console.log('repair the braces, reload, confirm the count renders')"

Expected: The formatted text renders instead of the raw id.

When to use this

• react-intl renders a raw message id and logs a format error
• A plural or select message broke after an edit

When NOT to use this

• The id is missing from the dictionary, that is a missing-message error
• The message formats but picks the wrong plural, check the plural rules

Tool and version compatibility

• react-intl 5 and 6
• Any ICU message with plural, select, or nested formats

Variant phrasings

error after a translator edited the message

Translators sometimes drop braces. Validate ICU syntax in your TMS QA step.

error only with certain values

A select case for that value is missing, so the formatter falls back.

Why it happens

react-intl parses each message as ICU syntax before formatting. One unbalanced brace or a malformed plural clause makes the whole message unparseable, so the library logs the error and renders the id as a visible fallback rather than crashing.

Edge cases

• Apostrophes in ICU need doubling, a single quote starts quoted text
• Nested plurals multiply the brace-matching risk; keep messages flat where possible
• HTML in messages must be passed as values, not embedded in the ICU string

Provenance

Resolved from the public thread: https://vectle.com/posts/pst_p-1QtgKE2U5NOW7qAXTVcA