marmelab/react-admin · error · Error

<TranslatableFieldsTabContent> was called outside of a Resou

Error message

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

What it means

<TranslatableFieldsTabContent> is the internal content renderer of TranslatableFields tabs; it needs the resource from ResourceContext (or a `resource` prop) to resolve sources/labels for the active locale. Without it, it throws (the message mentions 'record prop' but the failing check is the missing resource).

Source

Thrown at packages/ra-ui-materialui/src/field/TranslatableFieldsTabContent.tsx:45

        props: inProps,
        name: PREFIX,
    });
    const {
        children,
        groupKey = '',
        locale,
        record,
        resource: resourceProp,
        className,
        ...other
    } = props;
    const { selectedLocale, getRecordForLocale } = useTranslatableContext();
    const addLabel = Children.count(children) > 1;

    const parentSourceContext = useOptionalSourceContext();
    const resource = useResourceContext(props);
    if (!resource) {
        throw new Error(
            `<TranslatableFieldsTabContent> was called outside of a ResourceContext and without a record prop. You must set the resource prop.`
        );
    }
    const sourceContext = useMemo(
        () => ({
            getSource: (source: string) =>
                parentSourceContext
                    ? parentSourceContext.getSource(`${source}.${locale}`)
                    : `${source}.${locale}`,
            getLabel: (source: string) =>
                parentSourceContext
                    ? parentSourceContext.getLabel(source)
                    : getResourceFieldLabelKey(resource, source),
        }),
        [locale, parentSourceContext, resource]
    );
    // As fields rely on the RecordContext to get their values and have no knowledge of the locale,
    // we need to create a new record with the values for the current locale only

View on GitHub (pinned to 051f511bb0)

Solutions

1. Pass a `resource` prop to <TranslatableFieldsTabContent>.
2. Wrap it in <ResourceContextProvider value="posts"> so useResourceContext finds the resource.
3. Prefer using <TranslatableFields> itself rather than rendering TabContent directly.

Example fix

// before
<TranslatableFieldsTabContent locale="en">...</TranslatableFieldsTabContent>

// after
<ResourceContextProvider value="posts">
  <TranslatableFieldsTabContent locale="en">...</TranslatableFieldsTabContent>
</ResourceContextProvider>

if (!resource) return null; // ensure ResourceContext or resource prop exists before rendering tab content

When it happens

Trigger: Rendering <TranslatableFieldsTabContent> manually outside a TranslatableFields/ResourceContext, without a `resource` prop; constructing custom translatable tabs without wrapping in ResourceContextProvider.

Common situations: Building a custom TranslatableFields-like component reusing the tab content; rendering the component in tests/storybook without resource context; refactoring TranslatableFields and bypassing its internals.

Related errors

• <TranslatableFields> was called outside of a ResourceContext
• 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
• <CreateButton> components should be used inside a <Resource>

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