material-ui: [TypeScript / Next.js Example] Link component not compatible with latest alpha

Using TS 4.x, Material UI latest alpha and next.js latest I am getting the following error in the Link.tsx component

if (naked) {
    return (
      <NextComposed
        className={className}
        ref={innerRef}
        href={href}
        {...other}
      />
    )
  }

the error comes when assigning the innerRef to the ref prop of the NextComposed component

Type '((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | (((instance: HTMLAnchorElement | null) => void) & ((instance: any) => void)) | ... 4 more ... | undefined' is not assignable to type '((instance: HTMLAnchorElement | null) => void) | RefObject<HTMLAnchorElement> | null | undefined'.
  Type 'RefObject<HTMLSpanElement>' is not assignable to type '((instance: HTMLAnchorElement | null) => void) | RefObject<HTMLAnchorElement> | null | undefined'.
    Type 'RefObject<HTMLSpanElement>' is not assignable to type 'RefObject<HTMLAnchorElement>'.
      Type 'HTMLSpanElement' is missing the following properties from type 'HTMLAnchorElement': charset, coords, download, hreflang, and 21 more.

I’ve only been working with TS for a few weeks now so not able to figure out the correct typings required here.

Any help would be appreciated

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 1
Comments: 18 (13 by maintainers)

Most upvoted comments

Hey @oliviertassinari you are right, it does fix it… feeling so dumb now 🤪 I’ll be happy to push a PR for that 🙂

matchatype on Nov 10, 2020

+1 based on the feedback to #22452.

Repro is here: https://codesandbox.io/s/infallible-forest-65g4d?file=/src/Link.tsx

Opening a terminal window and running npx tsc --noEmit will spit out the error.

sandbox@sse-sandbox-65g4d:/sandbox$ npx tsc --noEmit
src/Link.tsx:56:48 - error TS2322: Type '((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | (((instance: HTMLAnchorElement | null) => void) & ((instance: any) => void)) | ... 4 more ... | undefined' is not assignable to type '((instance: HTMLAnchorElement | null) => void) | RefObject<HTMLAnchorElement> | null | undefined'.
  Type 'RefObject<HTMLSpanElement>' is not assignable to type '((instance: HTMLAnchorElement | null) => void) | RefObject<HTMLAnchorElement> | null | undefined'.
    Type 'RefObject<HTMLSpanElement>' is not assignable to type 'RefObject<HTMLAnchorElement>'.
      Type 'HTMLSpanElement' is missing the following properties from type 'HTMLAnchorElement': charset, coords, download, hreflang, and 21 more.

56     return <NextComposed className={className} ref={innerRef} href={href} {...other} />;
                                                  ~~~

  node_modules/@types/react/index.d.ts:140:9
    140         ref?: Ref<T>;
                ~~~
    The expected type comes from property 'ref' which is declared here on type 'IntrinsicAttributes & Pick<AnchorHTMLAttributes<HTMLAnchorElement>, "dir" | "slot" | "style" | "title" | ... 257 more ... | "referrerPolicy"> & LinkProps & RefAttributes<...>'


Found 1 error.

deldrid1 on Sep 2, 2020

This should close?

@vicasas I think that we can still remove the any with in the example:

diff --git a/docs/src/modules/components/Link.tsx b/docs/src/modules/components/Link.tsx
index 16c3ee49b9..91c9cb5d61 100644
--- a/docs/src/modules/components/Link.tsx
+++ b/docs/src/modules/components/Link.tsx
@@ -67,14 +67,14 @@ const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(function Link(props,

   if (isExternal) {
     if (noLinkStyle) {
-      return <a className={className} href={href as string} ref={ref as any} {...other} />;
+      return <a className={className} href={href as string} {...other} ref={ref} />;
     }

     return <MuiLink className={className} href={href as string} ref={ref} {...other} />;
   }

   if (noLinkStyle) {
-    return <NextLinkComposed className={className} ref={ref as any} to={href} {...other} />;
+    return <NextLinkComposed className={className} to={href} {...other} ref={ref} />;
   }

   let linkAs = linkAsProp || (href as string);

But I don’t know why, maybe @eps1lon has an explanation.

oliviertassinari on Jan 12, 2021

I can’t observe the issue. Is it possible a release patched it?

oliviertassinari on Sep 4, 2020

FYI - looks like this issue exists all the way back to "@material-ui/core": "5.0.0-alpha.1" on my local setup.

deldrid1 on Sep 2, 2020