marmelab/react-admin · error · Error

useCloseNotification must be used within a CloseNotification

Error message

useCloseNotification must be used within a CloseNotificationContext.Provider

What it means

useCloseNotification exposes the function that closes the currently displayed notification; it is provided by react-admin's <Notification> component via CloseNotificationContext. The hook throws when no provider is present in the tree, i.e. when the app doesn't render <Notification> (or renders the calling component outside it).

Source

Thrown at packages/ra-core/src/notification/useCloseNotification.ts:7

import { useContext } from 'react';
import { CloseNotificationContext } from './CloseNotificationContext';

export const useCloseNotification = () => {
    const closeNotification = useContext(CloseNotificationContext);
    if (!closeNotification) {
        throw new Error(
            'useCloseNotification must be used within a CloseNotificationContext.Provider'
        );
    }
    return closeNotification;
};

View on GitHub (pinned to 051f511bb0)

Solutions

1. Render <Notification /> (or a custom notification component providing CloseNotificationContext) inside your Layout or Admin root so the context is available.
2. Render the consuming component inside the react-admin Layout so it is a descendant of the provider.
3. If you only want to dismiss notifications, use useNotify with undoable/pending logic or manage the notification yourself instead of this internal hook.

Example fix

// before
// CustomLayout.jsx without <Notification>
const CustomLayout = ({ children }) => <div>{children}</div>;
const CloseButton = () => {
    const close = useCloseNotification(); // throws
    return <button onClick={close}>x</button>;
};

// after
import { Notification } from 'react-admin';
const CustomLayout = ({ children }) => (
    <div>
        {children}
        <Notification />
    </div>
);
const CloseButton = () => {
    const close = useCloseNotification();
    return <button onClick={close}>x</button>;
};

import { useContext } from 'react';
import { CloseNotificationContext } from 'ra-core';
const ctx = useContext(CloseNotificationContext);
if (!ctx) {
    // render nothing or a fallback instead of calling the hook
    return null;
}

const hasCloseNotification = (v: (() => void) | undefined): v is () => void => typeof v === 'function';

When it happens

Trigger: Calling useCloseNotification() in an app that never renders <Notification>, or in a component mounted outside the react-admin layout tree (custom page, portal) so it doesn't see the provider.

Common situations: Building a custom notification-dismiss button before adding <Notification> to the Layout; using react-admin hooks inside a plain React page without the admin Layout; upgrading react-admin where <Notification> was accidentally removed from the custom Layout.

Related errors

• useTranslatableContext must be used inside a TranslatableCon
• usePreference cannot be used outside of a Configurable compo
• usePreferencesEditor must be used within a PreferencesEditor
• useSetInspectorTitle cannot be called outside of a Preferenc
• Cannot call an event handler while rendering.

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