marmelab/react-admin · error · Error

<InfiniteList> was called outside of a ResourceContext and w

Error message

<InfiniteList> was called outside of a ResourceContext and without a resource prop. You must set the resource prop.

What it means

<InfiniteList> and its controller hook need to know which resource to fetch. The library resolves the resource from a `resource` prop or the surrounding ResourceContext; if both are absent, useInfiniteListController throws. This guards against rendering an infinite list with no data source.

Source

Thrown at packages/ra-core/src/controller/list/useInfiniteListController.ts:66

    props: InfiniteListControllerProps<RecordType, ErrorType> = {}
): InfiniteListControllerResult<RecordType, ErrorType> => {
    const {
        debounce = 500,
        disableAuthentication = false,
        disableSyncWithLocation = false,
        exporter = defaultExporter,
        filter,
        filterDefaultValues,
        perPage = 10,
        queryOptions,
        sort,
        storeKey,
    } = props;
    const resource = useResourceContext(props);
    const { meta, ...otherQueryOptions } = queryOptions ?? {};

    if (!resource) {
        throw new Error(
            `<InfiniteList> was called outside of a ResourceContext and without a resource prop. You must set the resource prop.`
        );
    }
    if (filter && isValidElement(filter)) {
        throw new Error(
            '<InfiniteList> received a React element as `filter` props. If you intended to set the list filter elements, use the `filters` (with an s) prop instead. The `filter` prop is internal and should not be set by the developer.'
        );
    }

    const { isPending: isPendingAuthenticated } = useAuthenticated({
        enabled: !disableAuthentication,
    });

    const { isPending: isPendingCanAccess } = useRequireAccess<RecordType>({
        action: 'list',
        resource,
        enabled: !disableAuthentication && !isPendingAuthenticated,
    });

View on GitHub (pinned to 051f511bb0)

Solutions

Pass an explicit `resource` prop: <InfiniteList resource="posts" />
Render the InfiniteList inside a <Resource name="posts"> route/context
Wrap the component in a <ResourceContextProvider value="posts">
Check for typos/undefined variables in a dynamic resource prop

Example fix

// before
<InfiniteList />
// after
<InfiniteList resource="posts" />

Defensive patterns

Strategy: validation

Validate before calling

const resource = props.resource ?? useResourceContext();
if (!resource) throw new Error('<InfiniteList> needs a resource prop or ResourceContext');
return <InfiniteList resource={resource} {...props} />;

Type guard

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

Try / catch

null

Prevention

Always render InfiniteList within a Resource route or pass resource explicitly
Add a runtime check in custom wrappers around list components
In tests, wrap with ResourceContextProvider value="posts"
Never derive resource from possibly-undefined route params without a fallback

When it happens

Trigger: Rendering <InfiniteList> outside a <Resource> context without passing a `resource` prop, e.g. on a custom page or in a story, or passing an empty/undefined resource.

Common situations: Custom pages and dashboards using InfiniteList directly; renaming resources so the prop became undefined; migrating from List (which had defaults) to InfiniteList.

Related errors

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