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

useSearchState() hook: ReadonlyURLSearchParams is missing property size #53141

Closed
1 task done
bencmbrook opened this issue Jul 25, 2023 · 2 comments
Closed
1 task done
Labels
bug Issue was opened via the bug report template. locked Navigation Related to Next.js linking (e.g., <Link>) and navigation.

Comments

@bencmbrook
Copy link
Contributor

bencmbrook commented Jul 25, 2023

Verify canary release

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

Provide environment information

Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 22.5.0: Thu Jun  8 22:22:22 PDT 2023; root:xnu-8796.121.3~7/RELEASE_X86_64
    Binaries:
      Node: 18.16.0
      npm: 9.5.1
      Yarn: 1.22.19
      pnpm: N/A
    Relevant Packages:
      next: 13.4.12
      eslint-config-next: 13.0.0
      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)

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

https://codesandbox.io/p/sandbox/aged-sunset-4s55pr?file=%2Fapp%2Fpage.tsx%3A12%2C30

To Reproduce

You will notice this in TypeScript when trying to construct URLSearchParams from the value returned by useSearchParams().

import { usePathname, useRouter, useSearchParams } from 'next/navigation';

In your component

  const searchParams = useSearchParams();
  const params = new URLSearchParams(searchParams);
                                     ^^^^^^^^^^^^^

Argument of type 'ReadonlyURLSearchParams' is not assignable to parameter of type 'string | string[][] | Record<string, string> | URLSearchParams | undefined'.
Property 'size' is missing in type 'ReadonlyURLSearchParams' but required in type 'URLSearchParams'.

Describe the Bug

The URL Standard expects URLSearchParams to have the size property, but ReadonlyURLSearchParams is missing this property.

This is a relatively new addition to the spec.

This causes a Type Error when attempting to construct URLSearchParams from ReadonlyURLSearchParams, as recommended in the Next docs here.

This breaks next build on Node v18.16.0+, including on Vercel

Expected Behavior

ReadonlyURLSearchParams has property size, which returns the list's size. (Here)

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

@bencmbrook bencmbrook added the bug Issue was opened via the bug report template. label Jul 25, 2023
@github-actions github-actions bot added the Navigation Related to Next.js linking (e.g., <Link>) and navigation. label Jul 25, 2023
@bencmbrook
Copy link
Contributor Author

Found a duplicate #49774

@bencmbrook bencmbrook closed this as not planned Won't fix, can't repro, duplicate, stale Jul 25, 2023
@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 Aug 16, 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.
Projects
None yet
Development

No branches or pull requests

1 participant