Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Property ref does not exist on <Link> component when typedRoutes: true #51907

Closed
1 task done
mateuszaliyev opened this issue Jun 27, 2023 · 1 comment · Fixed by #51977
Closed
1 task done

Property ref does not exist on <Link> component when typedRoutes: true #51907

mateuszaliyev opened this issue Jun 27, 2023 · 1 comment · Fixed by #51977
Labels
bug Issue was opened via the bug report template. locked Navigation Related to Next.js linking (e.g., <Link>) and navigation. TypeScript Related to types with Next.js.

Comments

@mateuszaliyev
Copy link
Contributor

Verify canary release

  • I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: win32
      Arch: x64
      Version: Windows 10 Home
    Binaries:
      Node: 18.16.0
      npm: N/A
      Yarn: N/A
      pnpm: N/A
    Relevant Packages:
      next: 13.4.8-canary.6
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 4.9.5
    Next.js Config:
      output: N/A

Which area(s) of Next.js are affected? (leave empty if unsure)

Routing (next/router, next/navigation, next/link), TypeScript (plugin, built-in types)

Link to the code that reproduces this issue or a replay of the bug

https://github.com/mateuszaliyev/next-typed-routes-link-ref

To Reproduce

  1. Clone the repository
  2. Install dependencies (npm install)
  3. Run development server so TypeScript plugin can generate types (npm run dev)
  4. Run npx tsc or check the /app/page.tsx file to see the type error

Describe the Bug

Property ref does not exist on <Link> component when experimental.typedRoutes = true.

$ npx tsc
app/page.tsx:10:20 - error TS2322: Type '{ children: string; href: "/"; ref: MutableRefObject<HTMLAnchorElement>; }' is not assignable to type 'IntrinsicAttributes & LinkRestProps & { href: UrlObject | RouteImpl<"/">; }'.
  Property 'ref' does not exist on type 'IntrinsicAttributes & LinkRestProps & { href: UrlObject | RouteImpl<"/">; }'. Did you mean 'href'?

10     <Link href="/" ref={ref}>
                      ~~~


Found 1 error in app/page.tsx:10

image

Expected Behavior

Property ref should exist on <Link> component regardless of the experimental.typedRoutes setting.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

@mateuszaliyev mateuszaliyev added the bug Issue was opened via the bug report template. label Jun 27, 2023
@github-actions github-actions bot added Navigation Related to Next.js linking (e.g., <Link>) and navigation. TypeScript Related to types with Next.js. labels Jun 27, 2023
shuding added a commit that referenced this issue Jun 29, 2023
### What?
This PR fixes `next/link`'s `<Link />` missing many `<a />` props when
`experimental.typedRoutes` is enabled.

### How?
It does that by changing `AnchorHTMLAttributes<HTMLAnchorElement>` in
LinkRestProps to
`DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>,
HTMLAnchorElement>`, which contains all `<a />` props.

Fixes #51907

---------

Co-authored-by: Shu Ding <g@shud.in>
@github-actions
Copy link
Contributor

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Jul 30, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Issue was opened via the bug report template. locked Navigation Related to Next.js linking (e.g., <Link>) and navigation. TypeScript Related to types with Next.js.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant