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

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 next-intl useMessages returning undefined in a server component

TL;DR

useMessages is a client hook and server components cannot use hooks, so call getMessages on the server and pass the result down. Fetch the messages in the server component with getMessages, then hand them to a client component wrapped in NextIntlClientProvider. The hook starts working as soon as it has a provider above it.

The error

Error: useMessages must be used within NextIntlClientProvider
or: messages is undefined in Server Component src/app/[locale]/page.js

Fix it

Step 1: Confirm the component is a server component using the hook

grep -n "useMessages\|'use client'" src/app/\[locale\]/page.js | head -5

Expected: You see useMessages with no 'use client' directive, that is the mismatch.

Step 2: Fetch messages on the server with getMessages

node -e "console.log('in the server component: const messages = await getMessages(); then pass messages={messages} to the client child')"

Expected: The server component awaits getMessages and passes the result as a prop.

Step 3: Wrap the client child in NextIntlClientProvider

node -e "console.log('wrap the client child in NextIntlClientProvider and pass messages as a prop, then useMessages works inside')"

Expected: The provider sits between the server data and the hook call.

Step 4: Reload and confirm the messages resolve

curl -s YOUR_HOST/en | grep -o "Welcome" | head -1

Expected: The translated string renders instead of undefined.

When to use this

• useMessages returns undefined or throws in a server component
• You are on the Next.js app router with next-intl

When NOT to use this

• The hook works but a specific key is missing, that is a missing-key problem
• You are on the pages router, there use getMessages in getServerSideProps instead

Tool and version compatibility

• next-intl v3/v4, Next.js 13+ app router
• getMessages from next-intl/server, useMessages from next-intl

Variant phrasings

useTranslations also undefined in server component

Same fix. All next-intl hooks are client-only, the server API is getTranslations.

messages undefined even with the provider

The provider got messages={undefined} because getMessages ran without the locale param. Pass the locale through.

Why it happens

Server components run on the server and cannot use React hooks or context the way client components do. next-intl splits its API in two: async server functions that read the request locale, and client hooks that read from the provider. Mixing them gives you undefined.

Edge cases

• getMessages needs the locale from params, in a layout grab it from the segment
• Passing huge message catalogs as props bloats the flight data, scope messages per route
• Server actions cannot call the hooks either, same server/client split applies

Provenance

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

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

Thread query: next-intl usemessages returns undefined error in server component

TL;DR: useMessages is a client hook and server components cannot use hooks, so call getMessages on the server and pass the result down. Fetch the messages in the server component with getMessages, then hand them to a client component wrapped in NextIntlClientProvider. The hook starts working as soon as it has a provider above it.

Not specified by the original author.

useTranslations must be used within IntlProvider

TL;DR

Fixes the runtime error when useTranslations is called outside an IntlProvider. Wrap the component tree in IntlProvider or move the hook below the provider. Use when a new component crashes with this exact error. Not for messages that render in the wrong language.

The error

Error: [React Intl] useTranslations must be used within IntlProvider

Fix it

Step 1: Find the component calling the hook

grep -rn "useTranslations" src/components/BrokenPanel.* | head -5

Expected: You see the hook call in the crashing component.

Step 2: Check the provider placement in the tree

grep -rn "IntlProvider" src/App.* src/index.* | head -5

Expected: You see where IntlProvider sits relative to the component.

Step 3: Move the hook below the provider or wrap the subtree

node -e "console.log('wrap the panel in IntlProvider or hoist the provider above it')"

Expected: The component renders with translations available.

When to use this

• A component crashes with the IntlProvider error
• The hook works in one page but not in a newly added one

When NOT to use this

• Translations render but in the wrong language, that is a locale detection issue
• The provider exists but messages are empty, check the message loader

Tool and version compatibility

• react-intl 5 and 6
• Also applies to next-intl's useTranslations in client components

Variant phrasings

error in a modal or portal

Portals render outside the provider subtree. Wrap the portal content explicitly.

error in tests only

Tests that render components in isolation need a provider wrapper in the test setup.

Why it happens

useTranslations reads the intl context created by IntlProvider. If the component is rendered outside that provider, there is no context to read, so the hook throws instead of returning undefined strings.

Edge cases

• Lazy-loaded routes may mount before the provider initializes
• Multiple providers with different locales can shadow each other unexpectedly
• Storybook stories each need their own provider decorator

Provenance

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

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

Thread query: useTranslations must be used within IntlProvider

TL;DR: Fixes the runtime error when useTranslations is called outside an IntlProvider. Wrap the component tree in IntlProvider or move the hook below the provider. Use when a new component crashes with this exact error. Not for messages that render in the wrong language.