Cannot read properties of undefined (reading 'onClick') on Popover and Menu

[thomaslecoeur]

Dependencies check up

• I have verified that I use latest version of all @mantine/* packages

What version of @mantine/* packages do you have in package.json?

7.17.2

What package has an issue?

@mantine/core

What framework do you use?

Next.js

In which browsers you can reproduce the issue?

Not applicable – issue is not related to the browser

Describe the bug

I get this error sometimes on Menu and Popover. I'm using Next.JS 15 and React 19. Error was not happening with Next.JS 14 and previous React version.

 ⨯ TypeError: Cannot read properties of undefined (reading 'onClick')
    at @mantine/core/MenuTarget (../../../../src/components/Menu/MenuTarget/MenuTarget.tsx:30:52)
  28 |   const _childrenProps = children.props as any;
  29 |
> 30 |   const onClick = createEventHandler(_childrenProps.onClick, () => {
     |                                                    ^
  31 |     if (ctx.trigger === 'click') {
  32 |       ctx.toggleDropdown();
  33 |     } else if (ctx.trigger === 'click-hover') { {
  digest: '3306055790'
}

Here is the JSX for this error :

<Menu shadow="md" width={200}>
  <MenuTarget>
    <ActionIcon size="lg" variant="transparent" aria-label="Settings">
      <IconDotsVertical size={16} stroke={1.5} />
    </ActionIcon>
  </MenuTarget>
  <MenuDropdown>
    <ABomDeleteArticleButton abom={node.abom} abomArticleId={node.articleId}>
      <MenuItem leftSection={<IconTrash size={16} />}>
        Supprimer l&apos;article
      </MenuItem>
    </ABomDeleteArticleButton>
  </MenuDropdown>
</Menu>

If possible, include a link to a codesandbox with a minimal reproduction

No response

Possible fix

No response

Self-service

• I would be willing to implement a fix for this issue

[rtivital]

Thanks for submitting the issue! In order to proceed, we need a codesandbox with a minimal reproduction. You can use this template to create it – https://codesandbox.io/s/mantine-react-template-q4dd5d?file=/src/App.js.

To learn what is a minimal, reproducible example, please see the article – https://stackoverflow.com/help/minimal-reproducible-example. In short: Minimal reproducible example (MRE) includes only the essential code and data needed to reproduce the problem, excluding unrelated details or complexities. An effective MRE ensures that others can quickly replicate the issue in their own environment without requiring additional context or assumptions.

Please note that issues without reproduction are closed as incomplete if the reproduction is not provided until the next round of issues review (usually 5-10 days after this comment has been posted).

[rtivital]

No reproduction, issue closed

[vmnghia]

this looks like a problem with React or Next, I'm having this issue too but only in some cases and with Tooltip instead of Popover and Menu.
For example I have a component with Tooltip and it works on one page, but navigate to another page with that same component an error is thrown.
This is the error message:

click on the link in the error point me to this line of code:

This is my JSX

<Tooltip label={scheme.description}>
	<div>
		{scheme.logo ? (
			<Image
				alt={scheme.description}
				className='h-12 w-12 object-contain lg:h-16 lg:w-16'
				height={64}
				src={getMediaSrc(scheme.logo, 'small')}
				width={64}
			/>
		) : (
			<div className='flex h-12 w-12 items-center justify-center lg:h-16 lg:w-16'>
				<Text size='xs'>{scheme.description}</Text>
			</div>
		)}
	</div>
</Tooltip>

PS: this happen only in development environment for now, I haven't seen any error related to this issue on production