Typescript issues in 10.19.4+ with @mui/material

[akornatskyy]

It works as expected with preact version 10.19.3. The issues are reproducable with 10.19.4 - 10.19.6.

Issue 1

<Card component="form" />

cause:

No overload matches this call.
  Overload 1 of 2, '(props: never): Element | null', gave the following error.
    Type 'string' is not assignable to type 'never'.
  Overload 2 of 2, '(props: DefaultComponentProps<CardTypeMap<{}, "div">>): Element | null', gave the following error.
    Type '{ component: string; }' is not assignable to type 'IntrinsicAttributes & CardOwnProps & CommonProps & Omit<HTMLAttributes<HTMLDivElement>, "children" | ... 7 more ... | "raised">'.
      Property 'component' does not exist on type 'IntrinsicAttributes & CardOwnProps & CommonProps & Omit<HTMLAttributes<HTMLDivElement>, "children" | ... 7 more ... | "raised">'.ts(2769)

Issue 2

another issue is related to Button:

<Button>
  test
  <Icon />
</Button>

cause:

No overload matches this call.
  Overload 2 of 3, '(props: { component: React.ElementType; } & ButtonOwnProps & Omit<ButtonBaseOwnProps, "classes"> & CommonProps & Omit<any, "className" | "style" | ... 23 more ... | "startIcon">): Element | null', gave the following error.
    Type 'Element' is not assignable to type 'string'.ts(2769)

Issue 3

and another one:

<Button>
  test
  {disabled && <Icon />}
</Button>

cause:

No overload matches this call.
  Overload 2 of 3, '(props: { component: React.ElementType; } & ButtonOwnProps & Omit<ButtonBaseOwnProps, "classes"> & CommonProps & Omit<any, "className" | "style" | ... 23 more ... | "startIcon">): Element | null', gave the following error.
    Type 'false | Element | undefined' is not assignable to type 'string'.
      Type 'undefined' is not assignable to type 'string'.ts(2769)

[rschristian]

Hm, odd. Looks like #4239 & #4271 would be the only relevant changes though. Mind going into node_modules & reversing the changes to figure out which one or ones in particular are problematic?

[akornatskyy]

it is related to #4271, specifically only this one:

preact/compat/src/index.d.ts

Lines 175 to 179 in c3160cc

	export type ComponentPropsWithRef<
	C extends ComponentType<any> | keyof JSXInternal.IntrinsicElements
	> = C extends (new(props: infer P) => Component<any, any>)
	? PropsWithoutRef<P> & RefAttributes<InstanceType<C>>
	: ComponentProps<C>;

[rschristian]

Thanks for finding that!

Will need to figure out an altered implementation I guess.

[ryanlchan]

Issue 1 resolved for me by modifying ComponentPropsWithRef as follows (from ryanlchan/preact@8a6b642):

export type ComponentPropsWithRef<
    C extends ComponentType<any> | keyof JSXInternal.IntrinsicElements
> = C extends new (props: infer P) => Component<any, any>
    ? PropsWithoutRef<P> & RefAttributes<InstanceType<C>>
    : PropsWithRef<ComponentProps<C>>;

This matches the implementation in types/react:

type ComponentPropsWithRef<T extends ElementType> = T extends (new(props: infer P) => Component<any, any>)
        ? PropsWithoutRef<P> & RefAttributes<InstanceType<T>>
        : PropsWithRef<ComponentProps<T>>;

I could not get issues 2 and 3 to repro - @akornatskyy could you check if this helps you?

[akornatskyy]

@ryanlchan : thanks. I rolled your change on top of version 10.20.1. yes, that solved all issues reported earlier.