Material-ui: Typography Component prop component not assignable to string

[TobyGWilliams]

My related SO question which I raised yesterday. I've since investigated more and come to the conclusion it might be an issue as I can't see how such a simple copy/paste from the docs has gone wrong. _(I've tried many variants of package upgrades and haven't been able to get it resolved that way either)_

When using the typography component as per the docs:

<Typography variant="h1" component="h1">
  Hello World
</Typography>

I get typing error: Type 'string' is not assignable to type 'ElementType<HTMLAttributes<HTMLElement>>' on the component property. This has started appearing after I upgraded to next9.

I've tried a lot of variants, however, the only variant that I can get to pass is ('h1' as unknown) as React.ElementType<React.HTMLAttributes<HTMLElement>>
Which isn't acceptable for many obvious reasons.

packages:

"@material-ui/core": "4.4.3",
"@material-ui/icons": "4.4.3",
"@next/bundle-analyzer": "9.0.3",
"@material-ui/styles": "4.4.3",
"react": "16.10.2",

dev packages:

"@types/react": "16.9.5",
"@types/next": "8.0.6",
"typescript": "3.5.3"

[oliviertassinari]

@TobyGWilliams Do you have a reproduction we can look at?

[TrejGun]

have the same error with "a"

[TobyGWilliams]

I'm trying to get a codepen going. Until I get that sorted, please have a go with this:

const x: React.ElementType<React.HTMLAttributes<HTMLElement>> = 'h1';

In my local setup that gets picked up by typescript every single time

[TobyGWilliams]

Edit: I managed to get a setup working in codesandox but that works as expected and not like my local setup.

I'm going to have to work a bit harder to replicate in the sandbox.

[oliviertassinari]

I'm closing as we need a reproduction to be able to investigate. Thanks for the report, maybe somebody will find a solution in the future.

[ptitjes]

I confirm this regression in 4.5.1 from 4.4.0.

[oliviertassinari]

See #17864 for a possible solution

[ptitjes]

@oliviertassinari Tried @material-ui/[email protected] + [email protected] as proposed in #17864. This does not fix the problem for us.

EDIT: @types/[email protected] seems to have fixed our problem. (We were in 16.9.2 before.)

[TobyGWilliams]

@ptitjes If possible, could you share your tsconfig? I'm on the same packages as you and have tried replicating #17864 and had no luck with that either (including reset node_modules)

[TobyGWilliams]

Upgrading from typescript 3.5.3 to 3.6.4 is what caused this problem to appear for us.

[winterlamon]

@TobyGWilliams Do you have duplicate versions of @types/react in your lock file? Resolving that seemed to fix the problem for us. We're also using v3.6.4 of typescript.

[IskanderMustafin]

Downgrading @types/react version helped me.

Previously I had:

        "@types/react": "16.9.12",
        "@types/react-dom": "16.9.4",

Now I have:

        "@types/react": "16.9.2",
        "@types/react-dom": "16.9.0",

[codingedgar]

I also had this problem when upgraded from.4.3.3 to 4.9.5

thanks to @fyodore82 to point out in this comment https://github.com/mui-org/material-ui/commit/b6ff4f55e5375a5fbd7040485d12ea7170a8047b#commitcomment-37686032 to the way of using component https://material-ui.com/guides/typescript/#usage-of-component-prop

I used to have:

export const TypographyTemplate2: React.ComponentType<TypographyProps> = (props) =>
  <MuiThemeProvider theme={theme}>
    <Typography
      paragraph
      align='center'
      variant='body2'
      component='div'
      {...props}
    >
      <Box fontWeight="fontWeightLight">
        {props.children}
      </Box>
    </Typography>
  </MuiThemeProvider>

after update the compiler gave this error:

No overload matches this call.
  Overload 1 of 2, '(props: { component: "div"; } & { align?: "inherit" | "left" | "center" | "right" | "justify" | undefined; color?: "inherit" | "initial" | "primary" | "secondary" | "textPrimary" | "textSecondary" | "error" | undefined; ... 5 more ...; variantMapping?: Partial<...> | undefined; } & CommonProps<...> & Pick<...>): Element', gave the following error.
    Type '{ children: Element; align: Alignment; color?: "inherit" | "initial" | "primary" | "secondary" | "textPrimary" | "textSecondary" | "error" | undefined; display?: "initial" | ... 2 more ... | undefined; ... 260 more ...; component: "div"; }' is not assignable to type 'Pick<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style" | "title" | "className" | ... 250 more ... | "onTransitionEndCapture"> & { ...; }, "ref" | ... 251 more ... | "onTransitionEndCapture">'.
      Types of property 'ref' are incompatible.
        Type '((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null | undefined' is not assignable to type '((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined'.
          Type 'RefObject<HTMLSpanElement>' is not assignable to type '((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined'.
            Type 'RefObject<HTMLSpanElement>' is not assignable to type 'RefObject<HTMLDivElement>'.
              Property 'align' is missing in type 'HTMLSpanElement' but required in type 'HTMLDivElement'.
  Overload 2 of 2, '(props: DefaultComponentProps<TypographyTypeMap<{}, "span">>): Element', gave the following error.
    Type '{ children: Element; align: Alignment; color?: "inherit" | "initial" | "primary" | "secondary" | "textPrimary" | "textSecondary" | "error" | undefined; display?: "initial" | ... 2 more ... | undefined; ... 260 more ...; component: string; }' is not assignable to type 'IntrinsicAttributes & { align?: "inherit" | "left" | "center" | "right" | "justify" | undefined; color?: "inherit" | "initial" | "primary" | "secondary" | "textPrimary" | "textSecondary" | "error" | undefined; ... 5 more ...; variantMapping?: Partial<...> | undefined; } & CommonProps<...> & Pick<...>'.
      Property 'component' does not exist on type 'IntrinsicAttributes & { align?: "inherit" | "left" | "center" | "right" | "justify" | undefined; color?: "inherit" | "initial" | "primary" | "secondary" | "textPrimary" | "textSecondary" | "error" | undefined; ... 5 more ...; variantMapping?: Partial<...> | undefined; } & CommonProps<...> & Pick<...>'.ts(2769)
lib.dom.d.ts(6708, 5): 'align' is declared here.

thanks to the tests i figured out this fix:

- component='div'
+ component={CustomComponent}

const CustomComponent: React.FC = () => <div />;
 export const TypographyTemplate2: React.ComponentType<TypographyProps> = (props) =>
  <MuiThemeProvider theme={theme}>
    <Typography
      paragraph
      align='center'
      variant='body2'
      component={CustomComponent}
      {...props}
    >
      <Box fontWeight="fontWeightLight">
        {props.children}
      </Box>
    </Typography>
  </MuiThemeProvider>



md5-71e89036b70d413427a194c84d20fc16



```ts
export const TypographyTemplate2: React.ComponentType<TypographyProps<'div',{component:'div'}>> = (props) =>
  <MuiThemeProvider theme={theme}>
    <Typography
      paragraph
      align='center'
      variant='body2'
      component='div'
      {...props}
    >
      <Box fontWeight="fontWeightLight">
        {props.children}
      </Box>
    </Typography>
  </MuiThemeProvider>

This upgrade upgrade was a breaking change, at least for the types, quick fix though (but took a while to figure out) , I feel this should be documented somewhere but don't know where should be appropriated.

[romakulakov]

It looks like this issue appears when some types clashing happens, for me it was having two different versions of @types/react-router-dom

"@types/[email protected]":
  version "5.1.5"
  resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.1.5.tgz#7c334a2ea785dbad2b2dcdd83d2cf3d9973da090"
  integrity sha512-ArBM4B1g3BWLGbaGvwBGO75GNFbLDUthrDojV2vHLih/Tq8M+tgvY1DSwkuNrPSwdp/GUL93WSEpTZs8nVyJLw==
  dependencies:
    "@types/history" "*"
    "@types/react" "*"
    "@types/react-router" "*"

"@types/react-router-dom@^4.3.4":
  version "4.3.5"
  resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-4.3.5.tgz#72f229967690c890d00f96e6b85e9ee5780db31f"
  integrity sha512-eFajSUASYbPHg2BDM1G8Btx+YqGgvROPIg6sBhl3O4kbDdYXdFdfrgQFf/pcBuQVObjfT9AL/dd15jilR5DIEA==
  dependencies:
    "@types/history" "*"
    "@types/react" "*"
    "@types/react-router" "*"

Removing @types/react-router-dom@^4.3.4 solved the issue for me