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

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

Error message

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

What it means

ListButton navigates to the list view of a resource, so the resource name must be resolvable. The library throws when no `resource` prop is given and no ResourceContext is present.

Source

Thrown at packages/ra-ui-materialui/src/button/ListButton.tsx:63

export const ListButton = React.forwardRef(function ListButton(
    inProps: ListButtonProps,
    ref: React.ForwardedRef<HTMLAnchorElement>
) {
    const props = useThemeProps({
        props: inProps,
        name: PREFIX,
    });

    const {
        icon = defaultIcon,
        label: labelProp,
        resource: resourceProp,
        scrollToTop = true,
        ...rest
    } = props;
    const resource = useResourceContext(props);
    if (!resource) {
        throw new Error(
            '<ListButton> components should be used inside a <Resource> component or provided the resource prop.'
        );
    }
    const { canAccess, isPending } = useCanAccess({
        action: 'list',
        resource,
    });
    const createPath = useCreatePath();
    const getResourceLabel = useGetResourceLabel();
    const label = useResourceTranslation({
        resourceI18nKey: `resources.${resource}.action.list`,
        baseI18nKey: 'ra.action.list',
        options: {
            name: getResourceLabel(resource, 1),
        },
        userText: labelProp,
    });

View on GitHub (pinned to 051f511bb0)

Solutions

Pass resource explicitly: <ListButton resource="posts" />
Wrap usage in <ResourceContextProvider resource="posts">
Render inside a standard Show/Edit view

Example fix

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

Defensive patterns

Strategy: validation

Validate before calling

if (!resourceProp && !resourceContextValue) {
  throw new Error('ListButton requires resource prop or ResourceContext');
}

Type guard

const resolveResource = (r?: string): string | null => (typeof r === 'string' && r ? r : null);

Prevention

Use ListButton only within Show/Edit toolbars under a Resource
Pass resource explicitly in reusable toolbars
Add Storybook tests rendering buttons without context to surface the issue early

When it happens

Trigger: Rendering <ListButton> with no resource prop outside any <Resource> / ResourceContextProvider; useResourceContext(props) returns null.

Common situations: Show/Edit action toolbars rendered in isolation; custom pages; refactored components losing context.

Related errors

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