[Link] typescript error Property 'component' does not exist on type IntrinsicAttributes ... #16846
Comments
|
I get the same error when i try to use |
|
I also got this problem after upgrading to v4. TS complained that |
|
I've got the same issue. To solve it I've used the proposed solution from Mui documentation But the solution is not working if you're using the styled-components |
|
One thing I noticed that may help folks who are encountering this: in my case, I got this error when passing a property to the const AdapterLink = React.forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => (
<Link innerRef={ref as any} {...props} />
));
<Button color="primary" component={AdapterLink} to="/" badProp>
Simple case
</Button>would give the same error about a non-existent This is a very misleading error from TypeScript, as the issue is the |
|
However, in addition to the above error (which went away when I removed the offending property), I also always get this error when trying to override the |
|
What is the status of this??? It does not seem like there's a fix for this or some solution that helps us solve the issue. Custom Button import { Button, createStyles, withStyles, WithStyles } from "@material-ui/core";
import { ButtonProps } from "@material-ui/core/Button";
import React from "react";
import { Link as RouterLink, LinkProps as RouterLinkProps } from "react-router-dom";
import Colors, { rgba } from "theme/colors";
const styles = () =>
createStyles({
root: {
color: rgba(Colors.white, 0.5),
backgroundColor: rgba(Colors.white, 0.05),
"&:hover": {
color: rgba(Colors.white, 0.75),
backgroundColor: rgba(Colors.white, 0.2)
}
}
});
const LinkRef = React.forwardRef<HTMLAnchorElement, RouterLinkProps>((props, ref) => (
<RouterLink innerRef={ref} {...props} />
));
class CustomButton extends React.Component<ButtonProps & WithStyles> {
public render() {
return <Button component={LinkRef} {...this.props} />;
}
}
export default withStyles(styles)(LoginSignupButton);Usage <CustomButton to="/register" component={Link}>Button Text</CustomButton>Error |
|
Not to mention... Component definition is missing display name |
Btw, I had this same exact error on an |
This comment has been minimized.
This comment has been minimized.
|
This is indeed still an issue from what I can tell using the latest MUI, React and Typescript I get these errors for custom components as well as the default options: <Button component="a">This fails</Button>AFAIK this should be re-opened. EDIT: This is strange, it is now working after I did a completely unrelated thing (increase VSCode's Typescript memory allotment). As far as I can tell, I changed nothing else to get the error to go away 🤷♂ |
|
@tsturtz please check if |
|
Typescript errors are VERY misleading here. Please check that you provide only correct props. E.g. in my case I had a Button that supposed to be link or action button depending on So I changed it to this and now there are no TS errors: import { Link } from 'react-router-dom';
...
onClick?: MouseEventHandler<T>;
to?: string;
...
return to ? (
<Button component={Link} to={to}>
{children}
</MUIButton>
) : (
<Button onClick={onClick}>{children}</Button>
);or like this: const props = {
to,
component: to ? Link : undefined,
onClick: to ? undefined : onClick,
};
return <Button {...props}>{children}</Button>; |
|
the component called in parent: the component implemented: this works fine |
import { Button } from "@material-ui/core"
import { ButtonProps } from "@material-ui/core/Button"
import Link, { LinkProps } from "./Link"
import { forwardRef } from "react"
export type ButtonLinkProps = Omit<ButtonProps, "href"> &
Pick<LinkProps, "href" | "as" | "prefetch">
const ButtonLink = forwardRef<ButtonLinkProps, any>((props, ref) => (
<Button
component={Link}
ref={ref}
{...props}
role={undefined} // remove the button role
/>
))
ButtonLink.displayName = "ButtonLink"
export default ButtonLinkThe code from the Using the custom button import ButtonLink from "@/components/ButtonLink"
<ButtonLink
href="/store"
variant="contained"
color="primary"
endIcon={<StoreIcon />}
>
Go to our store
</ButtonLink>This worked for me |
|
What I did I reinstalled the material-ui package and for version 4.12.2 problem disappeared. |
|
Anyone else think the best solution might be just to not use Typescript?! |
|
Hi guys, I had the same problem trying to add the nav option to a List component:
to solve it, I just added the nav option as any variable:
Is not a fancy solution, but works for me |
|
For me, the problem was that I was using react-router-dom |
|
I had the same issue, and the problem for me was also a problem in another prop. Interestingly it was enough to generate this kind of error message to use a badly typed value in the to prop. The solution was to update the to props path to a correct type (string, but the main point is that even a mistake like this can cause this kind of error message). |
|
Mine was trying to forward a prop to a styled component using typescript. Was able to sort it out like this. I decided to set the props to a type of any and then destructure the props. Don't know if there is a better way to extend the type definition for a styled component. ); }; const ContentWrapper = styled('main', { |
|
Hi All, the following solution worked for me: |
Or you can use |
|
With the latest If you need to use another |
|
This SO answer worked for me: https://stackoverflow.com/a/76300530 My code: |
|
Similar to And then in my component I could render: |
Link does not accept component property on some cases
I've looked #14970 #15827 but didn't find the solution
Expected Behavior 🤔
should compile with no error
Current Behavior 😯
In some cases(required props not supplied), typescript reports error
Property 'component' does not exist on type IntrinsicAttributes & AnchorHTMLAttributes<HTMLAnchorElement> ...Steps to Reproduce 🕹
Link: codesandbox
demo.tsxCode:
Context 🔦
Wrap Link component to provide custom tooltip, styles etc.
Your Environment 🌎
The text was updated successfully, but these errors were encountered: