marmelab/react-admin · error

The admin is empty. Please provide an empty component, or pa

Error message

The admin is empty. Please provide an empty component, or pass Resource or CustomRoutes as children.

What it means

CoreAdminRoutes computes the routes/resources from the <Admin>'s children; status 'empty' means no Resource or CustomRoutes children were found. If no `Ready`/`empty` component (e.g. <Ready> or the admin `empty` prop) is configured, react-admin throws because it has nothing to route to.

Source

Thrown at packages/ra-core/src/core/CoreAdminRoutes.tsx:47

        catchAll: CatchAll,
        dashboard,
        loading: LoadingPage,
        requireAuth,
        ready: Ready,
        authenticationError: AuthenticationError = Noop,
        accessDenied: AccessDenied = Noop,
    } = props;

    const { authenticated, isPending: isPendingAuthenticated } = useAuthState(
        undefined,
        // do not log the user out on failure to allow access to custom routes with no layout
        false,
        { enabled: requireAuth }
    );

    if (status === 'empty') {
        if (!Ready) {
            throw new Error(
                'The admin is empty. Please provide an empty component, or pass Resource or CustomRoutes as children.'
            );
        }
        return <Ready />;
    }

    // Note: custom routes with no layout are always rendered, regardless of the auth status

    if (status === 'loading' || (requireAuth && isPendingAuthenticated)) {
        return (
            <Routes>
                {customRoutesWithoutLayout}
                <Route
                    path="*"
                    element={
                        <div style={{ height: '100vh' }}>
                            <LoadingPage />
                        </div>

View on GitHub (pinned to 051f511bb0)

Solutions

  1. Add at least one child: <Resource name="posts" list={PostList} />
  2. Pass the `empty` prop (or Ready component) to <Admin empty={...}> to handle legitimately empty admins
  3. If resources load asynchronously, render a loading state or ensure the resolve function returns before status becomes 'empty' without resources
  4. Check that permission logic is not filtering out all resources unintentionally

Example fix

// before
<Admin dataProvider={dp} />
// after
<Admin dataProvider={dp}>
  <Resource name="posts" list={PostList} />
</Admin>
Defensive patterns

Strategy: fallback

Validate before calling

const hasChildren = (children) => React.Children.count(React.Children.toArray(children).filter(Boolean)) > 0;
if (!hasChildren(resources)) {
  return <Admin dataProvider={dp} empty={<NoResources />}>...</Admin>;
}

Prevention

When it happens

Trigger: Rendering <Admin dataProvider={...}> with zero children (no <Resource>, no <CustomRoutes>); all children provided asynchronously via a renderResources function that returns an empty array on first render while no `empty`/`Ready` component is set; children being conditionally removed by auth/permissions checks.

Common situations: Setting up an admin gradually (dataProvider first, resources later); permission-based menus where user has no access so all Resources are filtered out; dynamic resource registration that resolves empty; typo'd children (e.g. fragments resolving to nothing).

Related errors


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