TypeError: Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes' on PopoverTrigger

[jonahallibone]

Description

When I use a PopoverTrigger, I get a TypeError for the children

Link to Reproduction

NA

Steps to reproduce

1. Create a Popover in a project using TS
2. Insert a Button in the trigger
3. See error Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes'.

Chakra UI Version

1.8.8

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

[nftgeek]

Hi @jonahallibone are you using react 18?

[RobinUndersigned]

Got the same problem with React 18. I guess we need to wait for an Update on this?

[Shing-Ho]

It's because of the types of React 18 issues maybe. Try yarn why @types/React and check if there are two versions for it.

[adrian-amigues]

Hi, I'm encountering the same issue after upgrading to react 18. I have the latest versions for @types/react (18.0.5) and @types/react-dom (18.0.1).

It seems there was a PR for this (#5845) but it got closed in favor of a broader react-18 related updates (#5856). Maybe the Popover update was forgotten somehow?

It seems the problem comes from the react-18 update in how React.FC is typed, as doesn't include children anymore

[cyberwombat]

Temp patch:

import {
  PopoverTrigger as OrigPopoverTrigger
} from '@chakra-ui/react'

export const PopoverTrigger: React.FC<{ children: React.ReactNode }> =
  OrigPopoverTrigger

[TylerAPfledderer]

This was discussed on Discord and determined it was React 18 that was installed and causing the error. This issue should be closed, as reverting to the previous version will solve the problem.

[parth-develops]

<{ children: React.ReactNode }>

Temp patch:

import {
  PopoverTrigger as OrigPopoverTrigger
} from '@chakra-ui/react'

export const PopoverTrigger: React.FC<{ children: React.ReactNode }> =
  OrigPopoverTrigger

Thanks a lot

[PrashantIndurkar]

Temp patch:

import {
  PopoverTrigger as OrigPopoverTrigger
} from '@chakra-ui/react'

export const PopoverTrigger: React.FC<{ children: React.ReactNode }> =
  OrigPopoverTrigger

Thanks it works

[ephrinaw]

Great that is a nice fix.