Material-ui: [Material-ui 4] Typescript: component property does not exist on MenuItem

[sveyret]

I am testing mui@next. When I try to create a link (through react-router) on a MenuItem, creating a component as the documentation suggests, I have an error saying that porperty 'component' does not exist on type 'IntrinsicAttributes & { action?: ((actions: ButtonBaseActions) => void) | undefined; buttonRef?: ((instance: any) => void) | RefObject | null | undefined; centerRipple?: boolean | undefined; ... 6 more ...; TouchRippleProps?: Partial<...> | undefined; } & { ...; } & { ...; } & CommonProps<...> & Pick<...>'

This was working correctly with mui < v4.0

Note that it seemed to have already appeared and corrected in alpha.3 (https://github.com/mui-org/material-ui/issues/14786)

• [x] This is not a v0.x issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Code 🕹

const component:
  | React.ExoticComponent<LinkProps>
  | undefined = React.forwardRef<Link, LinkProps>(
  ({ children, ...props }, ref) => (
    <Link {...props} to="/" ref={ref}>
      {children}
    </Link>
  )
);

function displayMenuEntryContent() {
  return (
    <MenuItem component={component}>
      <ListItemText primary="Home" />
    </MenuItem>
  );
}

// Render
return displayMenuEntryContent();

Your Environment 🌎

| Tech | Version |
|--------------|---------|
| Material-UI | 4.0.0-alpha.4 |
| React | 16.8.4 |
| React router | 5.0.0 |
| @types/react | 16.8.8 |
| TypeScript | 3.3.3333 |

[oliviertassinari]

@sveyret I can't reproduce the issue. Do you have a reproduction?

[sveyret]

Thank you @oliviertassinari for looking at it.

I did not manage to reproduce in CodeSandbox, so I made a minimal project where the compilation fails because of this issue (see its README in order to see how to use it):
https://github.com/sveyret/issue-mui-14970

Note that it is very strange, because if the <MenuItem> is returned directly by the component (and not by a method), there is no error. It might then be actually a Typescript problem.

[sveyret]

@oliviertassinari I added the yarn.lock file to the project to ensure that versions are the same. I see that the issue is still “incomplete”. Is there anything else I need to provide?

[eps1lon]

@sveyret This should be fixed with #14772 and released in alpha.5. Can you verify if this issue is fixed for you?

[sveyret]

@eps1lon If I didn't do any mistake with my test, this PR does not correct the problem.

[oliviertassinari]

does not correct the problem.

👍 or 👎 ?

[sveyret]

:-1: Issue is not fixed

[eps1lon]

The issue is the type definition of your component. component is now a discriminant in a union type. It can no longer be all possible values. It's essentially the same as #14971.

You cannot use undefined | ComponentType. You have to use either one.

[Dudrie]

I encountered the same issue (even with alpha.5). However, I "fixed" it as follows in VS code:

1. Updated the typescript version to 3.3.4000 (this implies that typescript is a dependency in package.json or that you use a global version of typescript).
2. Switch workspace to use this version (instead of 3.3.3 vscode provides).
3. The error went away.

But, I recogniced something strange along that path: If you follow the steps above and if you switch back to ts 3.3.3 (after the error message disappearing) the error won't come back 😮

[eps1lon]

Updated the typescript version to 3.3.4000 (this implies that typescript is a dependency in package.json or that you use a global version of typescript).

This should be the default case. Every dependency should be listed.

Switch workspace to use this version (instead of 3.3.3 vscode provides).

We need to include this in the issue template. We can only help with error messages that are displayed when building your code (via tsc or webpack). Errors from your IDE depend on your IDE setup.

[sveyret]

@eps1lon Thank you for the information. You can close the issue, then.

[gianlucamateo]

I am having the same issue when trying to pass a component to the ListItem or MenuItem components.

I am trying to apply this proposed solution https://stackoverflow.com/a/55693040/11760100, but I am getting both IDE errors and TypeScript errors when trying to compile.

Property 'component' does not exist on type 'IntrinsicAttributes & { action?: ((actions: ButtonBaseActions) => void) | undefined; buttonRef?: ((instance: unknown) => void) | RefObject<unknown> | null | undefined; centerRipple?: boolean | undefined; ... 6 more ...; TouchRippleProps?: Partial<...> | undefined; } & { ...; } & { ...; } & CommonProps<...> & Pick<...>'. TS2322

I am using MUI 4.1.3 with TS 3.5.1

[TeoTN]

Same here with MUI 4.2.1 and TS 3.5.3.
Could you reopen the issue?

[yuvalic]

Same here even with MUI 4.3.1 and TS 3.5.3
help please

[oliviertassinari]

Do you guys have a reproduction? Could you upvote the issue in this case?

[eps1lon]

Please open a separate issue and follow the template. The original issue was fixed and is concerned with an alpha release which we do not support any longer.

[jankalfus]

Until PR #16487 is released, there's a workaround if you used a _div_ as component prop previously. Just remove the component completely and replace it by button prop.