{"record":{"id":"477c135bd15bd064","repo":"mantinedev/mantine","slug":"errormessage-477c13","errorCode":null,"errorMessage":"${errorMessage}","messagePattern":"\\$\\{errorMessage\\}","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/@mantine/core/src/core/utils/create-safe-context/create-safe-context.tsx","lineNumber":10,"sourceCode":"import { createContext, use } from 'react';\n\nexport function createSafeContext<ContextValue>(errorMessage: string) {\n  const Context = createContext<ContextValue | null>(null);\n\n  const useSafeContext = () => {\n    const ctx = use(Context);\n\n    if (ctx === null) {\n      throw new Error(errorMessage);\n    }\n\n    return ctx;\n  };\n\n  return [Context, useSafeContext] as const;\n}\n","sourceCodeStart":1,"sourceCodeEnd":18,"githubUrl":"https://github.com/mantinedev/mantine/blob/8a284e2c2c53a9cb6f39f5dc389bf41b7a2073f8/packages/@mantine/core/src/core/utils/create-safe-context/create-safe-context.tsx#L1-L18","documentation":"createSafeContext is Mantine's factory for context+hook pairs; the generated useSafeContext throws errorMessage when the context value is null, meaning the consuming component is not nested inside its required provider. Examples include useComboboxContext, useMenuContext, usePopoverContext, useTabsContext, etc. with messages like 'Combobox component was not found in tree'.","triggerScenarios":"Rendering a compound sub-component outside its parent: <Combobox.Option/> without <Combobox>, <Menu.Item/> without <Menu>, <Tabs.Tab/> without <Tabs>, or using the hook directly in an unrelated component.","commonSituations":"Extracting sub-components into separate files/exports and forgetting the parent wrapper, conditional rendering that orphans a child, copy-pasting a sub-component into another part of the tree, or re-exporting compound parts without the parent.","solutions":["Wrap the sub-component in its required parent (e.g. <Menu><Menu.Item/></Menu>)","Check that the parent component actually renders (not conditionally skipped) around the child","Move logic that uses the context hook inside the parent's subtree"],"exampleFix":"// before\n<Menu.Dropdown>\n  <Menu.Item>Copy</Menu.Item>\n</Menu.Dropdown>\n\n// after\n<Menu>\n  <Menu.Dropdown>\n    <Menu.Item>Copy</Menu.Item>\n  </Menu.Dropdown>\n</Menu>","handlingStrategy":"validation","validationCode":"// Always render sub-components inside their parent compound component:\n// <Menu><Menu.Dropdown><Menu.Item/></Menu.Dropdown></Menu>","typeGuard":"// Structural check: parent wrapper exists in JSX around the sub-component before rendering it","tryCatchPattern":null,"preventionTips":["Keep compound component hierarchies intact when extracting files","Never render sub-parts (Option, Item, Tab, Dropdown) outside their parent","Add render-time dev assertions in extracted components"],"tags":["mantine","react","context","compound-components"],"backgroundTag":"missing-context-provider","analyzedSha":"8a284e2c2c53a9cb6f39f5dc389bf41b7a2073f8","analyzedAt":"2026-08-28T10:25:51.087Z","schemaVersion":2},"datasetVersion":"2026-08-28T11:17:15.048Z"}