useCreateContext must be used inside a CreateContextProvider

Error message

useCreateContext must be used inside a CreateContextProvider

What it means

useCreateContext reads the CreateContext set by CreateContextProvider (which <Create> mounts automatically). Calling the hook outside that provider means there is no context value, and the hook throws to fail fast rather than return undefined. This indicates a hook/component used outside a Create page.

Source

Thrown at packages/ra-core/src/controller/create/useCreateContext.tsx:21

import { RaRecord } from '../../types';
import { CreateContext } from './CreateContext';
import { CreateControllerResult } from './useCreateController';

/**
 * Hook to read the create controller props from the CreateContext.
 *
 * Used within a <CreateContextProvider> (e.g. as a descendent of <Create>).
 *
 * @returns {CreateControllerResult} create controller props
 *
 * @see useCreateController for how it is filled
 */
export const useCreateContext = <
    RecordType extends RaRecord = RaRecord,
>(): CreateControllerResult<RecordType> => {
    const context = useContext(CreateContext);
    if (!context) {
        throw new Error(
            'useCreateContext must be used inside a CreateContextProvider'
        );
    }
    return context;
};

View on GitHub (pinned to 051f511bb0)

Solutions

Render the component inside <Create resource="posts">, which provides the context
Wrap custom setups with <CreateContextProvider value={controllerProps}>
In tests, wrap the component under test with CreateContextProvider or a <Create> base

Example fix

// before
const MyForm = () => {
    const { record } = useCreateContext(); // throws: no provider
    return <span>{record?.id}</span>;
};
// after
const Page = () => (
    <Create resource="posts">
        <MyForm />
    </Create>
);
const MyForm = () => {
    const { record } = useCreateContext();
    return <span>{record?.id}</span>;
};

Defensive patterns

Strategy: type-guard

Validate before calling

const insideCreate = typeof useCreateContextSafe === 'function';
// Or check at runtime with a safe wrapper:
const useCreateContextSafe = () => {
    try { return useCreateContext(); } catch { return null; }
};

Type guard

const isCreateControllerResult = (c: unknown): c is CreateControllerResult =>
    c != null && typeof c === 'object' && 'resource' in c;

Try / catch

try {
    const ctx = useCreateContext();
    return <div>{JSON.stringify(ctx.record)}</div>;
} catch (e) {
    if (e instanceof Error && e.message.includes('must be used inside a CreateContextProvider')) {
        console.error('Component must be rendered within <Create>');
        return null;
    }
    throw e;
}

Prevention

Only call context hooks in components mounted under their provider (<Create>)
Provide a default value or safe wrapper when components may render standalone
In unit tests, wrap components with the required provider
Keep hooks and their provider-coupled components in the same module for discoverability

When it happens

Trigger: Calling useCreateContext() or rendering a consumer (e.g. <SimpleForm> variants expecting create context, custom hooks) outside <Create>/CreateContextProvider; testing a component in isolation without the provider wrapper.

Common situations: Reusing form components from a Create page in standalone routes without wrapping; unit tests rendering components without CreateContextProvider; refactoring that removed the <Create> wrapper but kept children using the context.

Related errors

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