marmelab/react-admin · error · Error

useTranslatableContext must be used inside a TranslatableCon

Error message

useTranslatableContext must be used inside a TranslatableContextProvider

What it means

useTranslatableContext gives access to the translatable fields context (locale selection, get/set locale) provided by <TranslatableContextProvider>. React-admin throws this error when the hook is called outside any component that rendered a TranslatableContextProvider, because the context value is undefined. It is a fail-fast guard instead of returning undefined and failing later with a confusing null reference.

Source

Thrown at packages/ra-core/src/i18n/useTranslatableContext.ts:40

 *         selectLocale,
 *     } = useTranslatableContext();
 *
 *     return (
 *         <select onChange={selectLocale}>
 *             {locales.map((locale) => (
 *                 <option selected={locale.locale === selectedLocale}>
 *                     {locale.name}
 *                 </option>
 *             ))}
 *        </select>
 *     );
 * }
 */
export const useTranslatableContext = (): TranslatableContextValue => {
    const context = useContext(TranslatableContext);

    if (!context) {
        throw new Error(
            'useTranslatableContext must be used inside a TranslatableContextProvider'
        );
    }

    return context;
};

View on GitHub (pinned to 051f511bb0)

Solutions

1. Wrap the component (or its parent) in <TranslatableContextProvider> with locales, getLocale and setLocale props, or render it inside <TranslatableInputs> which supplies the provider.
2. If you only need locale handling, use useLocale/useLocales or your own state instead of the translatable context.
3. In tests/stories, add the provider to the decorators/wrapper before rendering the hook consumer.

Example fix

// before
const MyTranslatableField = () => {
    const { locales, getLocale, setLocale } = useTranslatableContext(); // throws
    return null;
};

// after
import { TranslatableContextProvider } from 'ra-core';
const MyTranslatableField = () => {
    const { locales, getLocale, setLocale } = useTranslatableContext();
    return null;
};
<TranslatableContextProvider
    value={{ locales, getLocale, setLocale }}
>
    <MyTranslatableField />
</TranslatableContextProvider>;

import { useContext } from 'react';
import { TranslatableContext } from 'ra-core';
// in the component, before using the hook's return:
const hasProvider = useContext(TranslatableContext) !== undefined;
if (!hasProvider) throw new Error('MyTranslatableField requires <TranslatableContextProvider>');

const hasTranslatableContext = (v: TranslatableContextValue | undefined): v is TranslatableContextValue => v != null;

When it happens

Trigger: Calling useTranslatableContext() in a component that is not a descendant of <TranslatableContextProvider>, or inside a component rendered through a portal/iframe that escaped the provider tree.

Common situations: Building custom translatable inputs and reusing the hook outside <TranslatableInputs>; extracting an input into a standalone story/test page without the provider wrapper; moving a component out of the TranslatableInputs subtree during a refactor.

Related errors

• useCloseNotification must be used within a CloseNotification
• usePreference cannot be used outside of a Configurable compo
• usePreferencesEditor must be used within a PreferencesEditor
• useSetInspectorTitle cannot be called outside of a Preferenc
• Cannot call an event handler while rendering.

AI-assisted analysis of marmelab/react-admin@051f511bb0 (2026-08-30). Data as JSON: /api/errors/0f58fdafc31a6544. Report an issue: GitHub.