Description
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