{"record":{"id":"c85221affe8d9953","repo":"marmelab/react-admin","slug":"the-count-component-must-be-used-inside-a-resource","errorCode":null,"errorMessage":"The Count component must be used inside a ResourceContext or must be passed a resource prop.","messagePattern":"The Count component must be used inside a ResourceContext or must be passed a resource prop\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/ra-ui-materialui/src/list/Count.tsx","lineNumber":44,"sourceCode":" * <Count resource=\"posts\" filter={{ is_published: true }}/>\n *\n * @example // Display the number of posts, with a custom Typography variant\n * <Count resource=\"posts\" variant=\"h1\" />\n *\n * @see ReferenceManyCount for a similar component which fetches the number of records related to the current one\n */\nexport const Count = (props: CountProps) => {\n    const {\n        filter,\n        sort,\n        link,\n        resource: resourceFromProps,\n        timeout = 1000,\n        ...rest\n    } = props;\n    const resource = useResourceContext(props);\n    if (!resource) {\n        throw new Error(\n            'The Count component must be used inside a ResourceContext or must be passed a resource prop.'\n        );\n    }\n    const oneSecondHasPassed = useTimeout(timeout);\n    const createPath = useCreatePath();\n\n    const { total, isPending, error } = useGetList(resource, {\n        filter,\n        sort,\n        pagination: { perPage: 1, page: 1 },\n    });\n\n    const body = isPending ? (\n        oneSecondHasPassed ? (\n            <CircularProgress size={14} />\n        ) : (\n            ''\n        )","sourceCodeStart":26,"sourceCodeEnd":62,"githubUrl":"https://github.com/marmelab/react-admin/blob/051f511bb0afb5ea565c2d3728bf4dab0a6fa5e0/packages/ra-ui-materialui/src/list/Count.tsx#L26-L62","documentation":"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.","triggerScenarios":"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.","commonSituations":"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.","solutions":["Pass the resource prop explicitly: <Count resource=\"posts\" />.","Or render it inside a <ResourceContext.Provider value=\"posts\"> or within a List where the context exists."],"exampleFix":"// before\n<Card><Count /></Card>\n\n// after\n<Card><Count resource=\"posts\" /></Card>","handlingStrategy":"validation","validationCode":"const resource = resourceProp ?? useResourceContext();\nif (!resource) {\n  throw new Error('Count requires a resource prop or a ResourceContext');\n}","typeGuard":"const hasResource = (p: { resource?: string }): p is { resource: string } =>\n  typeof p.resource === 'string' && p.resource.length > 0;","tryCatchPattern":null,"preventionTips":["Pass resource explicitly when using Count outside List/Resource pages","Wrap dashboard widgets in ResourceContext.Provider where possible","Verify variables feeding the resource prop are defined before render"],"tags":["react-admin","count","context","required-prop"],"backgroundTag":"missing-context-provider","analyzedSha":"051f511bb0afb5ea565c2d3728bf4dab0a6fa5e0","analyzedAt":"2026-08-30T02:28:14.926Z","schemaVersion":2},"datasetVersion":"2026-08-30T03:17:51.788Z"}