What causes " components should be used inside a component or provided with a resource prop. (The component set the resource prop for all its children)." in marmelab/react-admin?

<DeleteWithUndoButton> components should be used inside a <R

Error message

<DeleteWithUndoButton> components should be used inside a <Resource> component or provided with a resource prop. (The <Resource> component set the resource prop for all its children).

What it means

DeleteWithUndoButton determines which resource's record to delete from the resource context or a resource prop. If neither yields a resource, the library throws immediately during render because an undo-able delete cannot be dispatched without it.

Source

Thrown at packages/ra-ui-materialui/src/button/DeleteWithUndoButton.tsx:49

            name: PREFIX,
        });

        const {
            label: labelProp,
            className,
            icon = defaultIcon,
            onClick,
            redirect = 'list',
            mutationOptions,
            color = 'error',
            successMessage,
            ...rest
        } = props;

        const record = useRecordContext(props);
        const resource = useResourceContext(props);
        if (!resource) {
            throw new Error(
                '<DeleteWithUndoButton> components should be used inside a <Resource> component or provided with a resource prop. (The <Resource> component set the resource prop for all its children).'
            );
        }
        const { isPending, handleDelete } = useDeleteController({
            record,
            resource,
            redirect,
            mutationMode: 'undoable',
            mutationOptions,
            successMessage,
        });
        const handleClick: ReactEventHandler<any> = event => {
            event.stopPropagation();
            handleDelete();
            if (onClick) {
                onClick(event);
            }
        };

View on GitHub (pinned to 051f511bb0)

Solutions

Add the resource prop: <DeleteWithUndoButton resource="posts" />
Wrap the usage in <ResourceContextProvider resource="posts">
Render it inside a standard List/Edit/Show view

Example fix

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

Defensive patterns

Strategy: validation

Validate before calling

if (!props.resource && !resourceContext) {
  throw new Error('DeleteWithUndoButton requires a resource prop or Resource context');
}

Type guard

const isResourceKnown = (r: string | undefined): r is string => typeof r === 'string' && r.length > 0;

Prevention

Prefer rendering undo-able action buttons inside standard views where context exists
Type button wrapper props with a required `resource: ResourceName` field
Lint custom toolbars for buttons lacking resource props

When it happens

Trigger: Rendering <DeleteWithUndoButton> with no `resource` prop and no enclosing <Resource> / ResourceContextProvider; useResourceContext(props) returns undefined.

Common situations: Custom toolbars outside Resource context; copy-pasting the button into a standalone component; forgetting the prop after moving a view outside <Resource>.

Related errors

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