[ListItem] Property 'component' does not exist on type

[Graham42]

The example from the docs for composing react-router and material-ui Lists does not work without compile errors. (using my project's version of dependencies which are supposed to be compatible with material-ui)

I found some related issues to this, but they don't seem to be for the ListItem component.

Related:

• [prop component] ButtonBaseProps not accepting a component property #15827
• [Link] typescript error Property 'component' does not exist on type IntrinsicAttributes ... #16846

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Expected Behavior 🤔

There should be an example of how to use material-ui and react-router together that doesn't have compile errors.

Or... If there's specific versions that are required, they should be documented.

Steps to Reproduce 🕹

Note: It takes a few minutes for the type error to show up in the browser editor.

https://codesandbox.io/s/material-demo-coinv

Context 🔦

It seems like this should be a very common use case. People trying to build a nav which is a list of links. Maybe I'm missing something.

Your Environment 🌎

Tech	Version
Material-UI	4.4.3
React	16.8.6
TypeScript	3.4.4
react-router-dom	5.0.1

[merceyz]

The error message is wrong, the actual error is that NavLinkProps requires the prop to to be specified.

The fix for your code is

- React.forwardRef<HTMLAnchorElement, NavLinkProps>((itemProps, ref) => (
+ React.forwardRef<HTMLAnchorElement, Omit<NavLinkProps, 'innerRef' | 'to'>>((itemProps, ref) => (

There should be an example of how to use material-ui and react-router together that doesn't have compile errors.

There is, it's located here https://material-ui.com/guides/composition/#list

[eps1lon]

@Graham42 Most demos should be available in TypeScript as well. The demo in question has one and the fix from @merceyz is applied: https://material-ui.com/guides/composition/#ListRouter.tsx

[Graham42]

The error message is wrong

Well that's extremely frustrating....

Thanks for your help.

I guess this is a typescript bug?

[eps1lon]

I guess this is a typescript bug?

@Graham42 Your codesandbox link uses an outdated version. Check the new one from my comment in #17645 (comment)

[Graham42]

I guess this is a typescript bug?

I was referring to the error message being wrong.

[eps1lon]

I was referring to the error message being wrong.

It's more a chicken-egg problem. Given the props: the component is wrong BUT given the component: the props are wrong. Since the component is part of the props it's ambiguous where the error originates