marmelab/react-admin · error · Error

The Count component must be used inside a ResourceContext or

Error message

The Count component must be used inside a ResourceContext or must be passed a resource prop.

What it means

The Count component reads the resource name from ResourceContext (e.g. inside a List) or from an explicit resource prop. useResourceContext returning null means neither was provided, so Count cannot know which data provider endpoint to count and throws immediately.

Source

Thrown at packages/ra-ui-materialui/src/list/Count.tsx:44

 * <Count resource="posts" filter={{ is_published: true }}/>
 *
 * @example // Display the number of posts, with a custom Typography variant
 * <Count resource="posts" variant="h1" />
 *
 * @see ReferenceManyCount for a similar component which fetches the number of records related to the current one
 */
export const Count = (props: CountProps) => {
    const {
        filter,
        sort,
        link,
        resource: resourceFromProps,
        timeout = 1000,
        ...rest
    } = props;
    const resource = useResourceContext(props);
    if (!resource) {
        throw new Error(
            'The Count component must be used inside a ResourceContext or must be passed a resource prop.'
        );
    }
    const oneSecondHasPassed = useTimeout(timeout);
    const createPath = useCreatePath();

    const { total, isPending, error } = useGetList(resource, {
        filter,
        sort,
        pagination: { perPage: 1, page: 1 },
    });

    const body = isPending ? (
        oneSecondHasPassed ? (
            <CircularProgress size={14} />
        ) : (
            ''
        )

View on GitHub (pinned to 051f511bb0)

Solutions

1. Pass the resource prop explicitly: <Count resource="posts" />.
2. Or render it inside a <ResourceContext.Provider value="posts"> or within a List where the context exists.

Example fix

// before
<Card><Count /></Card>

// after
<Card><Count resource="posts" /></Card>

const resource = resourceProp ?? useResourceContext();
if (!resource) {
  throw new Error('Count requires a resource prop or a ResourceContext');
}

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

When it happens

Trigger: Rendering <Count /> outside any <ResourceContext> without a resource prop; placing it in a custom page/layout that has no Resource context; passing resource={undefined} from a variable that failed to resolve.

Common situations: Using <Count /> on a Dashboard or custom route outside List/Resource wrappers; extracting Count into a shared component used in contexts without the resource context.

Related errors

• <InfiniteList> was called outside of a ResourceContext and w
• useListController requires a non-empty resource prop or cont
• useShowController requires a non-empty resource prop or cont
• useNextPrevController was called outside of a ResourceContex
• useUnique: missing resource prop or context

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