We are facing an issue with our NextJS app where it works fine in production, and locally it renders correctly. However, we are encountering some unsightly warnings that we are trying to suppress.
client.js:1 Warning: Failed prop type: Invalid prop `component` supplied to `ForwardRef(Link)`. Expected an element type that can hold a ref. Did you accidentally provide a plain function component instead? For more information see https://mui.com/r/caveat-with-refs-guide
at Link (webpack-internal:///./node_modules/@mui/material/Link/Link.js:111:83)
at Link (webpack-internal:///./src/components/Link.tsx:29:11)
at span[...]
The code snippet from Link.tsx is structured as follows:
import { LinkProps, Link as MuiLink } from "@mui/material";
import NextLink, { LinkProps as NextLinkProps } from "next/link";
// Defining the CustomNextLink
export type CustomNextLinkProps = Omit<NextLinkProps, "href"> & {
_href: NextLinkProps["href"];
};
export const CustomNextLink = ({ _href, ...props }: CustomNextLinkProps) => {
return <NextLink href={_href} {...props} />;
};
// combine MUI LinkProps with NextLinkProps
type CombinedLinkProps = LinkProps<typeof NextLink>;
// we remove both href properties
// and define a new href property using NextLinkProps
export type MyLinkProps = Omit<CombinedLinkProps, "href"> & {
href: NextLinkProps["href"];
};
export const Link = ({ href, ...props }: MyLinkProps) => {
// use _href props of CustomNextLink to set the href
return <MuiLink {...props} component={CustomNextLink} _href={href} />;
};
You can find a reproducible example here: https://stackblitz.com/edit/stackblitz-starters-3ucqb2?description=React%20%20%20TypeScript%20starter%20project&file=src%2FLink.tsx,src%2FApp.tsx,src%2Findex.tsx&title=React%20Starter
Whenever we utilize this particular component, the warning pops up in the console. While other instances of similar errors have been resolved by enclosing inner components in a <div> or equivalent, that doesn't seem to be effective in this case.