Monorepo: <Menu.Button /> is missing a parent <Menu /> component when Menu and MenuButton come from different modules/packages

[florianbepunkt]

I have a monorepo with a shared collection of ui elements, one of them being a context menu, which uses the Menu component from headlessui. It allows for a customized MenuButton to be passed to the component. When I do this from my consuming package, I get the error <Menu.Button /> is missing a parent <Menu /> component. However when the CtxMenu component lives in the same package where it is consumed, the error is not present.

Not sure whether this a bug or misconfig on my side.

This is in my shared ui package

export function CtxMenu({
  button,
  children,
  className,
  label,
}: {
  button?: React.ReactNode;
  children: React.ReactNode | React.ReactNode[];
  className?: string;
  label?: string;
}) {
  return (
    <Menu as="div" className={classNames("relative flex-none", className ?? "")}>
      {button ?? <MenuButton>
      <EllipsisVerticalIcon className="h-5 w-5" aria-hidden="true" />
    </MenuButton>}
      <Transition
        as={Fragment}
        // shortened
      >
        <MenuItemsanchor="bottom end">
          {children}
        </MenuItems>
      </Transition>
    </Menu>
  );
}

Then it is consumed like this in my main package

            <CtxMenu button={<MenuButton>Test</MenuButton>}>
                // menu items, shortened for brevity…
            </CtxMenu>