mantinedev/mantine · error · Error

${errorMessage}

Error message

${errorMessage}

What it means

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'.

Source

Thrown at packages/@mantine/core/src/core/utils/create-safe-context/create-safe-context.tsx:10

import { createContext, use } from 'react';

export function createSafeContext<ContextValue>(errorMessage: string) {
  const Context = createContext<ContextValue | null>(null);

  const useSafeContext = () => {
    const ctx = use(Context);

    if (ctx === null) {
      throw new Error(errorMessage);
    }

    return ctx;
  };

  return [Context, useSafeContext] as const;
}

View on GitHub (pinned to 8a284e2c2c)

Solutions

1. Wrap the sub-component in its required parent (e.g. <Menu><Menu.Item/></Menu>)
2. Check that the parent component actually renders (not conditionally skipped) around the child
3. Move logic that uses the context hook inside the parent's subtree

Example fix

// before
<Menu.Dropdown>
  <Menu.Item>Copy</Menu.Item>
</Menu.Dropdown>

// after
<Menu>
  <Menu.Dropdown>
    <Menu.Item>Copy</Menu.Item>
  </Menu.Dropdown>
</Menu>

// Always render sub-components inside their parent compound component:
// <Menu><Menu.Dropdown><Menu.Item/></Menu.Dropdown></Menu>

// Structural check: parent wrapper exists in JSX around the sub-component before rendering it

When it happens

Trigger: 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.

Common situations: 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.

Related errors

• @mantine/core: MantineProvider was not found in component tr
• [@mantine/core] MantineProvider was not found in tree
• [@mantine/core] MantineProvider was not found in tree
• [@mantine/modals] useModals hook was called outside of conte
• Combobox.DropdownTarget component children should be an elem

AI-assisted analysis of mantinedev/mantine@8a284e2c2c (2026-08-28). Data as JSON: /api/errors/477c135bd15bd064. Report an issue: GitHub.