marmelab/react-admin · error

<DeleteWithConfirmButton> components should be used inside a

Error message

<DeleteWithConfirmButton> 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

DeleteWithConfirmButton requires a resource context to build the delete mutation and redirect. The library throws this error when the button is rendered without a `resource` prop AND outside any <Resource> component that would set it via context. This prevents silent failures where the delete target resource is unknown.

Source

Thrown at packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.tsx:67

            translateOptions = {},
            titleTranslateOptions = translateOptions,
            contentTranslateOptions = translateOptions,
            mutationOptions,
            color = 'error',
            successMessage,
            ...rest
        } = props;
        const translate = useTranslate();
        const record = useRecordContext(props);
        const resource = useResourceContext(props);
        const notify = useNotify();
        const unselect = useUnselect(resource);
        const redirect = useRedirect();
        // null when the delete button is used outside a form (e.g. in a list)
        const form = useFormContext();
        const [open, setOpen] = React.useState(false);
        if (!resource) {
            throw new Error(
                '<DeleteWithConfirmButton> 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 { onSuccess, onError, ...otherMutationOptions } =
            mutationOptions || {};

        const { isPending, handleDelete } = useDeleteController({
            record,
            redirect: redirectTo,
            mutationMode,
            mutationOptions: {
                ...otherMutationOptions,
                onSuccess: (...args) => {
                    setOpen(false);
                    if (onSuccess) {
                        onSuccess(...args);
                    } else {

View on GitHub (pinned to 051f511bb0)

Solutions

1. Pass an explicit resource prop: <DeleteWithConfirmButton resource="posts" />
2. Render the button inside a component tree wrapped by <ResourceContextProvider resource="posts">
3. Move the button back inside a List/Edit/Show view where the Resource context is set

Example fix

// before
<DeleteWithConfirmButton record={record} />
// after
<DeleteWithConfirmButton resource="posts" record={record} />

const resource = props.resource ?? useResourceContextSafe();
if (!resource) throw new Error('DeleteWithConfirmButton needs a resource prop or Resource context');

const hasResource = (p: { resource?: string } & Record<string, unknown>): p is { resource: string } & typeof p => typeof p.resource === 'string' && p.resource.length > 0;

When it happens

Trigger: Rendering <DeleteWithConfirmButton> outside a <Resource> context (e.g. in a standalone page or custom layout) without passing a `resource` prop; useResourceContext(props) returns null.

Common situations: Using the button in a custom dashboard or dialog outside List/Edit/Show views; refactoring views out of a <Resource> tree and forgetting the prop; wrapping children in a component that breaks ResourceContext.

Related errors

• <BulkDeleteButton> components should be used inside a <Resou
• <CreateButton> components should be used inside a <Resource>
• <DeleteButton> components should be used inside a <Resource>
• <DeleteWithUndoButton> components should be used inside a <R
• <EditButton> components should be used inside a <Resource> c

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