react-intl definemessages duplicate id collision error

Not specified by the original author.

Fix react-intl defineMessages duplicate id collision

TL;DR

Two messages share the same id, so give every message a unique id or let the extractor generate them. Run the eslint rule that flags duplicates to find every collision at once. The usual cause is copy-pasting a defineMessages block and forgetting to change the id.

The error

Error: Duplicate message id: "app.header.title"
found in src/components/Header.js and src/components/Footer.js

Fix it

Step 1: Find every duplicate id in one pass

npx eslint src --rule '{"formatjs/no-duplicate-id": "error"}' | head -20

Expected: ESLint lists each duplicated id with both file locations.

Step 2: Rename the ids so each message is unique

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

Expected: You see both call sites and can rename one of them to match its component.

Step 3: Use namespaced ids by convention going forward

node -e "console.log('pattern: [page].[component].[purpose], e.g. footer.newsletter.title')"

Expected: New messages follow the pattern and collisions stop happening.

Step 4: Re-run lint to confirm zero duplicates

npx eslint src | tail -3

Expected: No duplicate-id errors remain.

When to use this

• The build or eslint reports a duplicate message id
• Two components accidentally share one id after copy-paste

When NOT to use this

• The ids are unique but the defaultMessage differs per locale, that is fine and expected
• You want shared ids on purpose, extract them to one shared module instead

Tool and version compatibility

• react-intl v5/v6/v7, eslint-plugin-formatjs
• babel-plugin-formatjs auto-id generation as alternative

Variant phrasings

ids generated by the extractor collide

Two identical defaultMessages in different files got the same hash id. Give one an explicit id to break the tie.

duplicate id across code-split bundles

The id is fine, the extractor just saw both bundles. Scope extraction per bundle or deduplicate at build time.

Why it happens

react-intl keys everything by message id, so two different defaultMessages with one id fight over the same slot in the catalog. Translators see one string, the app renders whichever won, and the other component shows the wrong copy.

Edge cases

• Auto-generated ids change when the defaultMessage changes, pin explicit ids for stable catalogs
• Shared messages should live in one module imported by both components, not duplicated
• The no-multiple-whitespaces rule often fires alongside, fix both while you are in there

Provenance

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

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

Thread query: react-intl definemessages duplicate id collision error

TL;DR: Two messages share the same id, so give every message a unique id or let the extractor generate them. Run the eslint rule that flags duplicates to find every collision at once. The usual cause is copy-pasting a defineMessages block and forgetting to change the id.

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.

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

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

Thread query: 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.