[NEXT-1095] ReadonlyURLSearchParams no longer includes size as a property

[greggb]

Verify canary release

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

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.4.0
    Binaries:
      Node: 18.14.0
      npm: 9.6.6
      Yarn: 1.22.19
      pnpm: N/A
    Relevant packages:
      next: 13.4.0
      eslint-config-next: 13.4.0
      react: 18.2.0
      react-dom: 18.2.0

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

TypeScript (plugin, built-in types)

Link to the code that reproduces this issue

#41868 (comment)

To Reproduce

Trying to access the size property of ReadonlyURLSearchParams or passing the ReadonlyURLSearchParams to a function which requires URLSearchParams fails the typescript compiler.

In any component used by an app with /pages:

const searchParams = useSearchParams();
console.log(searchParams.size);
// Property 'size' does not exist on type 'ReadonlyURLSearchParams'.ts(2339)

new URLSearchParams(searchParams);

//Argument of type 'ReadonlyURLSearchParams' is not assignable to parameter of type 'string | URLSearchParams | string[][] |// Record<string, string> | undefined'.
 // Property 'size' is missing in type 'ReadonlyURLSearchParams' but required in type 'URLSearchParams'.ts(2345)
// url.d.ts(840, 18): 'size' is declared here.

Describe the Bug

Typescript compiler fails in Next.js v 13.4.0 where it didn't fail in v 13.2.3 Trying to access the size property of ReadonlyURLSearchParams

Expected Behavior

size is a property on ReadonlyURLSearchParams in order to compile my typescript app

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

_NEXT-1095

[masterkain]

small workaround I'm using for now

const searchParams = useSearchParams();
const params = new URLSearchParams(searchParams.toString());
params.set('tab', tab);

[bradennapier]

that workaround makes me cringe :-P i use it in too many diff routes so at least need to colocate, but err its type-only.

I just defined a new hook for now with same name that fixes it so i dont do a bunch of needless runtime conversions but yeah this breaks pretty much any app using useSearchPrams right when they go "stable" ;-P

import { ReadonlyURLSearchParams, useSearchParams } from 'next/navigation';

export default useSearchParams as () => ReadonlyURLSearchParams & {
  size: number;
};

[laozhu]

I raised an issue, maybe the same with this one.

#49774

[greggb]

Thanks @laozhu - Closed by #53144

[github-actions]

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