mantinedev/mantine · error · Error

HoverCard.Target component children should be an element or

Error message

HoverCard.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported

What it means

HoverCard.Target must attach hover event listeners and a positioning ref to its single child. getSingleElementChild returns null when the child is a fragment, primitive, or missing, so there is no DOM node to listen on and the component throws during render.

Source

Thrown at packages/@mantine/core/src/components/HoverCard/HoverCardTarget/HoverCardTarget.tsx:31

   * @default undefined (event listeners passed directly to component)
   */
  eventPropsWrapperName?: string;
}

const defaultProps = {
  refProp: 'ref',
} satisfies Partial<HoverCardTargetProps>;

export function HoverCardTarget(props: HoverCardTargetProps) {
  const { children, refProp, eventPropsWrapperName, ...others } = useProps(
    'HoverCardTarget',
    defaultProps,
    props
  );

  const child = getSingleElementChild(children);
  if (!child) {
    throw new Error(
      'HoverCard.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported'
    );
  }

  const ctx = useHoverCardContext();
  const groupContext = use(HoverCardGroupContext);
  const targetRef = useMergedRef(getRefProp(child), ctx.assignTarget);

  if (groupContext.withinGroup && ctx.getReferenceProps && ctx.reference) {
    const referenceProps = ctx.getReferenceProps();

    return (
      <Popover.Target refProp={refProp} {...others}>
        {cloneElement(
          child,
          eventPropsWrapperName
            ? { [eventPropsWrapperName]: { ...referenceProps, ref: ctx.reference } }
            : { ...referenceProps, ref: ctx.reference }

View on GitHub (pinned to 8a284e2c2c)

Solutions

1. Wrap the hover trigger in a real element (button, span, a)
2. Forward refs from custom trigger components
3. Ensure exactly one child element is always rendered

Example fix

// before
<HoverCard.Target>Hover me</HoverCard.Target>

// after
<HoverCard.Target><Button>Hover me</Button></HoverCard.Target>

// Wrap the hover trigger text in an element before passing to HoverCard.Target

const isValidHoverTarget = (children: React.ReactNode): boolean => isElement(children);

When it happens

Trigger: Child of HoverCard.Target is a string, number, fragment, multiple elements, or a component that doesn't forward refs.

Common situations: Wrapping a plain text label instead of a button/link, using a styled icon component that lacks ref forwarding, or conditional rendering that occasionally yields no element.

Related errors

• Combobox.DropdownTarget component children should be an elem
• Combobox.EventsTarget component children should be an elemen
• Combobox.Target component children should be an element or a
• ComboboxPopover.Target component children should be an eleme
• Menu.ContextMenu component children should be an element or

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