Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttribu-CodePudding

This error just started happening randomly:

However if I make a wrapping component that spreads props and introduces children there's no error:

const WorkingVersion = (props: {id?: number}) => <SimpleComponent {...props}><div>hello</div></SimpleComponent>

This issue also does not happen on codesandbox for typescript making me think it's a specific issue on my machine.

I tried reverting to the last working version however it somehow didn't fix the issue I was having.

What should I be looking for that could cause this error to popup?

CodePudding user response：

This is a recent bug caused by this PR on types of react v18. Other people are having same problems where everything breaks down after the update, see the recent issues opened here. My suggestion is to downgrade the react types until they release a hotfix for this. See also this issue

CodePudding user response：

Faced the same issue today.

What worked for me is changing node_modules\@types\react line:511 which is the interface definition of Function Component from

interface FunctionComponent<P = {}> {
    (props: P, context?: any): ReactElement<any, any> | null;
    propTypes?: WeakValidationMap<P> | undefined;
    contextTypes?: ValidationMap<any> | undefined;
    defaultProps?: Partial<P> | undefined;
    displayName?: string | undefined;
}

interface FunctionComponent<P = {}> {
    (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null;
    propTypes?: WeakValidationMap<P> | undefined;
    contextTypes?: ValidationMap<any> | undefined;
    defaultProps?: Partial<P> | undefined;
    displayName?: string | undefined;
}

This is just a temporary fix to be able to work with framer-motion in the meantime. We'll probably have to wait till they release the bugfix PR.

Hope it helps