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.

[akornatskyy]

@ryanlchan : any update? it is still reproducable with 10.23.1.

[latant]

I could make it work by providing the type parameter:
<Typography<"div"> component="div" variant="h5"/>
However, when the type param and component prop are not given, the props type is resolved as 'any', making the types useless.
Refactoring the OverridableComponent type definition in @mui/material can also solve this issue, like in this .d.ts file: https://gist.github.com/latant/b63c4ca48b6c0b723fcdaac5ed7c77b3
filling the 'component' property still needs the specified type parameter though.

[rschristian]

Going to close this out as I can no longer reproduce in latest Preact, seems to have been fixed?

import { Card, Button, Icon } from '@mui/material';

export function Tmp() {
    return <Card component="form" />;
}

export function Tmp2() {
    return <Button>test <Icon /></Button>;
}

export function Tmp3() {
    const disabled = true;
    return <Button>test {disabled && <Icon />}</Button>;
}

None of the original 3 cases seem to cause type errors anymore. If anyone can reproduce them, let me know.

[akornatskyy]

import Fade from '@mui/material/Fade';
import {styled} from '@mui/material/styles';

const Styled = styled(Fade)({});

export function T() {
    const disabled = true;
    return <p>test {disabled && <Styled />}</p>;
}

error TS2769: No overload matches this call...., gave the following error.
    Type 'false | Element | undefined' is not assignable to type 'string'.
      Type 'undefined' is not assignable to type 'string'.

[rschristian]

@akornatskyy I cannot reproduce any type errors with that snippet. Please double check the versions you're using.

@mui/material: 6.1.7
preact: 10.24.3