[TypeScript / Next.js Example] Link component not compatible with latest alpha

[piehouserat]

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

[oliviertassinari]

@piehouserat Do you have reproduction we can look at? (For instance, we need the exact versions of the dependencies)

[deldrid1]

+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]

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

[oliviertassinari]

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

[piehouserat]

Guys I had some more time on this, bumped all packages to latest and the problem still exists. To prove that it was unrelated to my own code I cloned the latest nextjs-with-typescript example from the repo and checked out the Link component.

Out of the box, the ref prop is underlined in red on line 56 with the same error as before.

[piehouserat]

@oliviertassinari can we please re-open this, the issue definitely exists and can be observed by simply looking at the example mentioned above

[oliviertassinari]

@piehouserat I can't reproduce with v5: https://github.com/mui-org/material-ui/tree/next/examples/nextjs-with-typescript.

[piehouserat]

@oliviertassinari this is so weird, I've attached a screenshot of what I see

https://ibb.co/BTSwfRq

Is there any way this could be environment related? Only thing of note is that I am on the macOS Big Sur beta although I can't see how this would affect things

[matchatype]

@oliviertassinari It does reproduce locally with v5 example as well, but the curl command refers to master branch. It should be:

curl https://codeload.github.com/mui-org/material-ui/tar.gz/next | tar -xz --strip=2  material-ui-next/examples/nextjs-with-typescript
cd nextjs-with-typescript

As a workaround you can silence it with: ref={innerRef as any}.

[oliviertassinari]

@matchatype Thanks for raising. You are right, we need to update all the examples' installation instructions, for instance:

diff --git a/examples/cdn/README.md b/examples/cdn/README.md
index 924c812b0f..f3dfc26263 100644
--- a/examples/cdn/README.md
+++ b/examples/cdn/README.md
@@ -5,7 +5,7 @@
 Download the example [or clone the repo](https://github.com/mui-org/material-ui):

 ```sh
-curl https://codeload.github.com/mui-org/material-ui/tar.gz/master | tar -xz --strip=2  material-ui-master/examples/cdn
+curl https://codeload.github.com/mui-org/material-ui/tar.gz/next | tar -xz --strip=2  material-ui-next/examples/cdn
 cd cdn
 ```

diff --git a/examples/gatsby-theme/README.md b/examples/gatsby-theme/README.md
index 79a5cc9554..b1ad3842e2 100644
--- a/examples/gatsby-theme/README.md
+++ b/examples/gatsby-theme/README.md
@@ -5,7 +5,7 @@
 Download the example [or clone the repo](https://github.com/mui-org/material-ui):

 ```sh
-curl https://codeload.github.com/mui-org/material-ui/tar.gz/master | tar -xz --strip=2  material-ui-master/examples/gatsby-theme
+curl https://codeload.github.com/mui-org/material-ui/tar.gz/next | tar -xz --strip=2  material-ui-next/examples/gatsby-theme
 cd gatsby-theme
 ```

Do you want to submit a pull request? :)

---

Regarding the ref, could you confirm that this fix it?

diff --git a/examples/nextjs-with-typescript/src/Link.tsx b/examples/nextjs-with-typescript/src/Link.tsx
index 18d0af0b62..92b1441e95 100644
--- a/examples/nextjs-with-typescript/src/Link.tsx
+++ b/examples/nextjs-with-typescript/src/Link.tsx
@@ -53,7 +53,7 @@ function Link(props: LinkProps) {
   });

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

   return (