marmelab/react-admin · error · Error

<TranslatableFields> was called outside of a ResourceContext

Error message

<TranslatableFields> was called outside of a ResourceContext and without a record prop. You must set the resource prop.

What it means

Besides a record, <TranslatableFields> needs a resource to resolve labels and field sources per locale. It reads the resource from ResourceContext or a `resource` prop; when both are missing it throws (note the error message says 'record prop' but the check is for the resource).

Source

Thrown at packages/ra-ui-materialui/src/field/TranslatableFields.tsx:95

    });
    const {
        defaultLocale,
        locales,
        groupKey = '',
        selector = <TranslatableFieldsTabs groupKey={groupKey} />,
        children,
        className,
        resource: resourceProp,
    } = props;
    const record = useRecordContext(props);
    if (!record) {
        throw new Error(
            `<TranslatableFields> was called outside of a RecordContext and without a record prop. You must set the record prop.`
        );
    }
    const resource = useResourceContext(props);
    if (!resource) {
        throw new Error(
            `<TranslatableFields> was called outside of a ResourceContext and without a record prop. You must set the resource prop.`
        );
    }
    const context = useTranslatable({ defaultLocale, locales });

    return (
        <Root className={className}>
            <TranslatableContextProvider value={context}>
                {selector}
                {locales.map(locale => (
                    <TranslatableFieldsTabContent
                        key={locale}
                        locale={locale}
                        record={record}
                        resource={resourceProp}
                        groupKey={groupKey}
                    >
                        {children}

View on GitHub (pinned to 051f511bb0)

Solutions

1. Pass the `resource` prop: `<TranslatableFields resource="posts" locales={...}>`.
2. Render inside a context that provides ResourceContext (inside <Resource> routes or `<ResourceContextProvider value="posts">`).

Example fix

// before
<RecordContextProvider value={record}>
  <TranslatableFields locales={['en', 'fr']}>...</TranslatableFields>
</RecordContextProvider>

// after
<RecordContextProvider value={record}>
  <TranslatableFields resource="posts" locales={['en', 'fr']}>...</TranslatableFields>
</RecordContextProvider>

if (!resource) throw new Error('TranslatableFields requires resource prop or ResourceContext');

When it happens

Trigger: Rendering <TranslatableFields> with a record available but outside any ResourceContext (e.g. custom page, test) and without a `resource` prop.

Common situations: Using TranslatableFields inside RecordContextProvider but outside <Resource> routes; renaming a resource; rendering in a dashboard/custom route where ResourceContext isn't set.

Related errors

• <TranslatableFields> was called outside of a RecordContext a
• <TranslatableFieldsTabContent> was called outside of a Resou
• useSelectAll should be used inside a ResourceContextProvider
• DataTableRow can only be used within a ResourceContext or be
• <BulkDeleteButton> components should be used inside a <Resou

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