marmelab/react-admin · error

The record cannot be deleted because no record has been pass

Error message

The record cannot be deleted because no record has been passed

What it means

useDeleteController's handleDelete callback needs the current record to know which id to delete. If no record was provided (record is undefined/null), the delete cannot identify a target, so it throws synchronously when the Delete button is clicked. Typically this means the component was rendered outside a record context.

Source

Thrown at packages/ra-core/src/controller/button/useDeleteController.tsx:130

                        ? error
                        : error?.message || 'ra.notification.http_error',
                    {
                        type: 'error',
                        messageArgs: {
                            _:
                                typeof error === 'string'
                                    ? error
                                    : error?.message,
                        },
                    }
                );
            },
        }
    );

    const handleDelete = useCallback(() => {
        if (!record) {
            throw new Error(
                'The record cannot be deleted because no record has been passed'
            );
        }
        deleteOne(
            resource,
            {
                id: record.id,
                previousData: record,
                meta: mutationMeta,
            },
            {
                mutationMode,
                ...otherMutationOptions,
            }
        );
    }, [
        deleteOne,
        mutationMeta,

View on GitHub (pinned to 051f511bb0)

Solutions

1. Render the button inside a RecordContext or pass record explicitly: <DeleteButton record={record} />
2. Disable the button until the record is loaded: <DeleteButton disabled={isLoading} />
3. If using useDeleteController directly, pass a record prop or guard the click handler

Example fix

// before
const MyToolbar = () => <DeleteButton />; // rendered outside record context
// after
const MyToolbar = () => {
    const record = useRecordContext();
    if (!record) return null;
    return <DeleteButton record={record} />;
};

const record = useRecordContext();
const canDelete = Boolean(record && record.id != null);
{canDelete && <DeleteButton record={record} />}

const hasRecord = (r: unknown): r is { id: unknown } =>
    r != null && typeof r === 'object' && 'id' in r;

try {
    handleDelete();
} catch (e) {
    if (e instanceof Error && e.message.includes('no record has been passed')) {
        notify('Cannot delete: record not loaded yet', { type: 'warning' });
        return;
    }
    throw e;
}

When it happens

Trigger: Clicking a <DeleteButton> rendered outside a <RecordContext>/list row so props.record is undefined; using useDeleteController directly without supplying a record; rendering DeleteButton in a Show/Edit page whose data hasn't loaded so record is still undefined when clicked (older versions).

Common situations: Custom toolbars rendering DeleteButton without record prop; buttons placed at page level instead of row level in a Datagrid; data still loading while the button is enabled.

Related errors

• The record cannot be updated because no record has been pass
• useTranslatableContext must be used inside a TranslatableCon
• useCloseNotification must be used within a CloseNotification
• usePreference cannot be used outside of a Configurable compo
• usePreferencesEditor must be used within a PreferencesEditor

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