react-intl formattedmessage children must be string error

Not specified by the original author.

Fix the react-intl FormattedMessage children must be a string error

TL;DR

You passed a non-string child where FormattedMessage wants text, so move the rich content into the values prop or use defaultMessage. The component renders its children as the message source, and elements break that contract. Restructure to keep text in the message and elements in values.

The error

[React Intl] FormattedMessage: children must be a string, received object
at FormattedMessage (src/components/Banner.js)

Fix it

Step 1: Find the offending usage

grep -rn "FormattedMessage" src/components/Banner.js | head -5

Expected: You see the component with element children.

Step 2: Move rich parts into values, keep text in defaultMessage

node -e "console.log('pattern: defaultMessage with a {name} placeholder and the bold element passed via values -- the message stays a plain string')"

Expected: The message prop is a plain string again.

Step 3: Check for the same pattern elsewhere

grep -rn "FormattedMessage" src/ | grep -v "defaultMessage" | head -10

Expected: Every usage either has a string child or uses defaultMessage plus values.

Step 4: Run the component tests

npx jest src/components/Banner.test.js | tail -3

Expected: Tests pass with no children-type warning.

When to use this

• React Intl warns that FormattedMessage children must be a string
• You nested elements directly inside the message component

When NOT to use this

• You need rich text with links and bold, use values with element placeholders
• The message comes from the catalog, pass id and let the catalog supply the string

Tool and version compatibility

• react-intl v5/v6/v7
• Same rule applies to the useIntl formatMessage path

Variant phrasings

same error from formatMessage with rich text

Pass the elements through values the same way. The rule is about where elements are allowed, not which API you call.

children is a number

Convert it to a string or move it into values as a formatted number. Numbers are not valid message sources either.

Why it happens

FormattedMessage treats its children as the message source when no id matches, and the ICU parser needs a string to parse. An element child is an object, so parsing cannot even start and React Intl bails with the type warning.

Edge cases

• values elements need keys when there are several, React will warn otherwise
• Do not concatenate translated fragments in JSX, translators need the whole sentence
• If the whole message is dynamic, build it with formatMessage in code, not nested components

Provenance

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

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

Thread query: react-intl formattedmessage children must be string error

TL;DR: You passed a non-string child where FormattedMessage wants text, so move the rich content into the values prop or use defaultMessage. The component renders its children as the message source, and elements break that contract. Restructure to keep text in the message and elements in values.

Not specified by the original author.

react-intl Error: [React Intl] Missing message: "app.title" for locale: "de"

TL;DR

Fixes the react-intl runtime error where a message id has no entry for the active locale. Add the missing key to the German messages file or restore the fallback so the id renders. Use when one locale shows raw ids while others render. Not for malformed ICU syntax.

The error

Error: [React Intl] Missing message: "app.title" for locale: "de".

Fix it

Step 1: Find where the message is defined

grep -rn "app.title" src/locales src/messages | head -10

Expected: You see which locale files define app.title and which do not.

Step 2: Add the missing German translation

node -e "console.log('add \"app.title\": \"[German text]\" to the de messages file')"

Expected: The de messages file now contains the key.

Step 3: Reload with locale set to German

node -e "console.log('render with locale de and confirm the header shows German text, not the raw id')"

Expected: The header renders German text; the console error is gone.

When to use this

• One locale renders raw message ids
• The console shows a Missing message error naming a specific id and locale

When NOT to use this

• Every locale shows the id, the message was never defined anywhere
• The message throws a syntax error, that is an ICU format problem

Tool and version compatibility

• react-intl 5 and 6
• Any message loader that builds per-locale dictionaries

Variant phrasings

missing message for many keys at once

A whole locale file failed to load. Check the import path before adding keys one by one.

error only in production builds

Production strips defaultMessage fallbacks, so a key missing from the locale file has no safety net.

Why it happens

react-intl looks up each message id in the dictionary for the active locale. If the key exists in English but was never translated into German, the lookup misses and the error names the exact id and locale. The id renders on screen because there is nothing else to show.

Edge cases

• Dynamic ids built by string concatenation cannot be statically checked, they miss silently
• Falling back to English hides the error but leaves untranslated UI in production
• Extraction runs that skip new components create exactly this pattern

Provenance

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

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

Thread query: react-intl Error: [React Intl] Missing message: "app.title" for locale: "de"

TL;DR: Fixes the react-intl runtime error where a message id has no entry for the active locale. Add the missing key to the German messages file or restore the fallback so the id renders. Use when one locale shows raw ids while others render. Not for malformed ICU syntax.

Not specified by the original author.

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

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

Thread query: react-intl plural format error in 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.