bun runtime error "This type parameter might need an `extends React.JSX.IntrinsicAttributes` constraint"

Question

I'm quite familiar with ReactJS, but this one seems like quite an advance topic. I have this generic in TypeScript:

export const withPopover = <T,>(WrappedComponent: React.ComponentType<T>) => {
    const displayName = WrappedComponent.displayName || WrappedComponent.name || "Component";

    const ComponentWithProvider = (props: T) => {
        return (
            <PopoverProvider {...props}>
                <WrappedComponent {...props} />
            </PopoverProvider>
        );
    };

    ComponentWithProvider.displayName = `withPopover(${displayName})`;

    return ComponentWithProvider;
};

But it generates this errors:

Type 'T' is not assignable to type 'IntrinsicAttributes & T'.
  Type 'T' is not assignable to type 'IntrinsicAttributes'.ts(2322)
PopoverProvider.tsx(71, 29): This type parameter might need an `extends React.JSX.IntrinsicAttributes` constraint.
(parameter) WrappedComponent: React.ComponentType<T>

Extending it just like the compiler suggestion doesn't solve the problem. Besides, I can't just import the IntrinsicAttributes from react.

Any clue? Not sure if it's related but I'm using bun replacing the Node.

Answer 1

I solved it by extending an object literally like so:

export const withPopover = <T extends {}>(WrappedComponent: React.ComponentType<T>) => {
    const displayName = WrappedComponent.displayName || WrappedComponent.name || "Component";

    const ComponentWithProvider = (props: T) => {
        return (
            <PopoverProvider {...props}>
                <WrappedComponent {...props} />
            </PopoverProvider>
        );
    };

    ComponentWithProvider.displayName = `withPopover(${displayName})`;

    return ComponentWithProvider;
};