Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

Description

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

Link to Reproduction

Steps to reproduce

Create a Popover in a project using TS
Insert a Button in the trigger
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

Issue Analytics

State:
Created a year ago
Reactions:5
Comments:9 (1 by maintainers)

Top GitHub Comments

51reactions

cyberwombatcommented, Apr 20, 2022

Temp patch:


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

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

3reactions

adrian-amiguescommented, Apr 19, 2022

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 (https://github.com/chakra-ui/chakra-ui/pull/5845) but it got closed in favor of a broader react-18 related updates (https://github.com/chakra-ui/chakra-ui/pull/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

Top Results From Across the Web

Type '{ children: Element; }' has no properties in common with ...

This is a recent bug caused by this PR on types of react v18. ... 'framer-motion' { export interface AnimatePresenceProps { children?:

React: Type {children: Element} has no properties in common ...

The React.js error "Type {children: Element} has no properties in common with type IntrinsicAttributes" occurs when we try to pass a children prop...

Solved - Type '{ children: Element; }' has no properties in ...

The error "Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes'." occurs when we pass in children to a ......

property 'children' does not exist on type 'intrinsicattributes

I have replaced the key prop as it is not recommended to use indexes as keys (see documentation), you could use the item's...

has no properties in common with type IntrinsicAttributes-Reactjs

Let wrap your HeaderProps interface with the type "PropsWithChildren" (import it from React). interface HeaderProps { children: any; } export const Header: ...