What causes " components should be used inside a component or provided the resource prop." in marmelab/react-admin?

<ShowButton> components should be used inside a <Resource> c

Error message

<ShowButton> components should be used inside a <Resource> component or provided the resource prop.

What it means

ShowButton links to the show view of a record and must know the target resource. The library throws at render time when no `resource` prop is supplied and no ResourceContext is available.

Source

Thrown at packages/ra-ui-materialui/src/button/ShowButton.tsx:57

    inProps: ShowButtonProps<RecordType>,
    ref: React.ForwardedRef<HTMLAnchorElement>
) {
    const props = useThemeProps({
        props: inProps,
        name: PREFIX,
    });

    const {
        icon = defaultIcon,
        label: labelProp,
        record: recordProp,
        resource: resourceProp,
        scrollToTop = true,
        ...rest
    } = props;
    const resource = useResourceContext(props);
    if (!resource) {
        throw new Error(
            '<ShowButton> components should be used inside a <Resource> component or provided the resource prop.'
        );
    }
    const record = useRecordContext(props);
    const createPath = useCreatePath();
    const { canAccess, isPending } = useCanAccess({
        action: 'show',
        resource,
        record,
    });
    const getResourceLabel = useGetResourceLabel();
    const getRecordRepresentation = useGetRecordRepresentation();
    const recordRepresentationValue = getRecordRepresentation(record);

    const recordRepresentation =
        typeof recordRepresentationValue === 'string'
            ? recordRepresentationValue
            : recordRepresentationValue?.toString();

View on GitHub (pinned to 051f511bb0)

Solutions

Pass resource explicitly: <ShowButton resource="posts" />
Wrap usage in <ResourceContextProvider resource="posts">
Render inside a List/Edit view where the context exists

Example fix

// before
<ShowButton />
// after
<ShowButton resource="posts" />

Defensive patterns

Strategy: validation

Validate before calling

const resource = props.resource ?? useContext(ResourceContext);
if (!resource) {
  throw new Error('ShowButton requires resource prop or ResourceContext');
}

Type guard

const hasResource = (p: { resource?: string }): p is { resource: string } => !!p.resource;

Prevention

Wrap custom pages in ResourceContextProvider
Require resource in shared action-button component props
Verify buttons render correctly inside each standard view

When it happens

Trigger: Rendering <ShowButton> without a `resource` prop outside a <Resource> / ResourceContextProvider tree.

Common situations: Custom row actions in non-react-admin tables; buttons extracted into shared component libraries; pages rendered outside the Admin resources tree.

Related errors

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