Description
I am trying to use Framer Motion to animate a Next.js Link component in a TypeScript environment, but I keep encountering a type error:
Property 'Link' does not exist on type '(<Props extends {}>(Component: string | ComponentType<PropsWithChildren<Props>>, customMotionComponentConfig?: CustomMotionComponentConfig | undefined) => CustomDomComponent<...>) & HTMLMotionComponents & SVGMotionComponents'. Did you mean 'link'?Code
Below is the code snippet for the component I am working on.
export default function Button({ href, text, type, ...props }: ButtonTypes) {
console.log(styles);
if (href) {
return (
<motion.Link
href={href}
type={type}
className={`${styles['neon-button']} focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-aquamarine`}
{...props}
>
{text}
</motion.Link>
);
}
return (
<motion.button
whileHover={{ scale: 1.1 }}
whileTap={{ scale: 0.9 }}
type={type}
className="neon-button focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-aquamarine"
{...props}
>
{text}
</motion.button>
);
}
Expectations
I have successfully added animation properties like whileHover and whileTap to the component, but I need to resolve the type error to ensure smooth functionality.