{"record":{"id":"38cd2b9eeeee2929","repo":"marmelab/react-admin","slug":"createbutton-components-should-be-used-inside-a","errorCode":null,"errorMessage":"<CreateButton> components should be used inside a <Resource> component or provided the resource prop.","messagePattern":"<CreateButton> components should be used inside a <Resource> component or provided the resource prop\\.","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"packages/ra-ui-materialui/src/button/CreateButton.tsx","lineNumber":60,"sourceCode":"        props: inProps,\n        name: PREFIX,\n    });\n    const {\n        className,\n        icon = defaultIcon,\n        label: labelProp,\n        resource: resourceProp,\n        scrollToTop = true,\n        variant,\n        to: locationDescriptor,\n        state: initialState = {},\n        ...rest\n    } = props;\n\n    const resource = useResourceContext(props);\n\n    if (!resource) {\n        throw new Error(\n            '<CreateButton> components should be used inside a <Resource> component or provided the resource prop.'\n        );\n    }\n\n    const { canAccess, isPending } = useCanAccess({\n        action: 'create',\n        resource,\n    });\n    const createPath = useCreatePath();\n    const getResourceLabel = useGetResourceLabel();\n    const label = useResourceTranslation({\n        resourceI18nKey: `resources.${resource}.action.create`,\n        baseI18nKey: 'ra.action.create',\n        options: {\n            name: getResourceLabel(resource, 1),\n        },\n        userText: labelProp,\n    });","sourceCodeStart":42,"sourceCodeEnd":78,"githubUrl":"https://github.com/marmelab/react-admin/blob/051f511bb0afb5ea565c2d3728bf4dab0a6fa5e0/packages/ra-ui-materialui/src/button/CreateButton.tsx#L42-L78","documentation":"CreateButton navigates to the create route of a resource; it resolves the resource via useResourceContext. Without a resource in context or via the resource prop, the target route and access control check are undefined, so it throws.","triggerScenarios":"Rendering <CreateButton /> on a custom page or layout outside any Resource/List context without a resource prop; using it inside <Admin>'s global layout (e.g. a top bar) where no resource context exists.","commonSituations":"Custom headers/action bars rendered app-wide; dashboards with entity-specific buttons missing the resource prop; test setups mounting the button standalone.","solutions":["Pass the resource prop: <CreateButton resource=\"posts\" />","Wrap in <ResourceContextProvider value=\"posts\"> or render inside a Resource-scoped page/List","In app-level layouts, derive the current resource from the route and pass it down"],"exampleFix":"// before\n<AppBar><CreateButton /></AppBar>\n\n// after\n<CreateButton resource=\"posts\" />","handlingStrategy":"type-guard","validationCode":"if (!resource) return <CreateButton resource=\"posts\" />; // supply explicit resource","typeGuard":"const hasResource = (p: { resource?: string }): p is { resource: string } =>\n  typeof p.resource === 'string' && p.resource.length > 0;","tryCatchPattern":"try {\n  return <CreateButton {...props} />;\n} catch (e) {\n  if (e.message.includes('CreateButton')) {\n    return <CreateButton resource={defaultResource} {...props} />;\n  }\n  throw e;\n}","preventionTips":["Provide resource prop in app-level layouts and dashboards","Use ResourceContextProvider for pages outside Resource routes","Derive resource from the current route in global UI","Add smoke tests rendering shared buttons outside resource scope"],"tags":["react-admin","resource-context","missing-prop","button"],"backgroundTag":"missing-resource-context","analyzedSha":"051f511bb0afb5ea565c2d3728bf4dab0a6fa5e0","analyzedAt":"2026-08-30T02:28:14.926Z","schemaVersion":2},"datasetVersion":"2026-08-30T03:17:51.788Z"}