Getting "Property '$$typeof' is missing" when extending next/link in Next.js with TypeScript

Viewed 19

I have this in my code:

import NextLink from 'next/link'
import ExternalLink from './External'

type PropsType = typeof NextLink & {
  href: string
  children: React.ReactNode
}

export default function Link(props: PropsType) {
  return <NextLink {...props} />
}

Link.External = ExternalLink

I want to do that to simply start creating an API for links which does some extra stuff on top of Next.js's next/link. The ExternalLink (for completeness) is just this:

import React from 'react'

type ComponentPropsType = React.HTMLProps<HTMLAnchorElement> & {
  children: JSX.Element
  href: string
}

export default function Component({
  href,
  children,
  ...attrs
}: ComponentPropsType) {
  return <a {...attrs} target="_blank" rel="noreferrer" href={href}>{children}</a>
}

I am not using the ExternalLink for this question, I am simply using a regular link, like this:

<Link href="/foo">Foo</Link>

However, I am getting this error:

enter image description here

Property '$$typeof' is missing in type '{ children: string; href: string; }' but required in type 'ForwardRefExoticComponent<Omit<AnchorHTMLAttributes, keyof InternalLinkProps> & InternalLinkProps & { ...; } & RefAttributes<...>>'.ts(2741)

The Next.js link.d.ts looks like this when clicking through on VSCode:

/// <reference types="node" />
import React from 'react';
import { UrlObject } from 'url';
declare type Url = string | UrlObject;
declare type InternalLinkProps = {
    href: Url;
    as?: Url;
    replace?: boolean;
    scroll?: boolean;
    shallow?: boolean;
    passHref?: boolean;
    prefetch?: boolean;
    locale?: string | false;
    legacyBehavior?: boolean;
    /**
     * requires experimental.newNextLinkBehavior
     */
    onMouseEnter?: (e: any) => void;
    /**
     * requires experimental.newNextLinkBehavior
     */
    onTouchStart?: (e: any) => void;
    /**
     * requires experimental.newNextLinkBehavior
     */
    onClick?: (e: any) => void;
};
export declare type LinkProps = InternalLinkProps;
declare const Link: React.ForwardRefExoticComponent<Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof InternalLinkProps> & InternalLinkProps & {
    children?: React.ReactNode;
} & React.RefAttributes<HTMLAnchorElement>>;
export default Link;

What am I doing wrong, and how do I properly type it to extend it like this?

0 Answers
Related