TypeError with TS@5.1.3: Property 'hitsPerPage' does not exist on type 'IntrinsicAttributes & PlainSearchParameters'

[jcwillox]

🐛 Current behavior

So this might be a bug with typescript, but it's the only library that broke when updating it so I'm going to create the bug report here.

When running with version 5.1.3 of typescript and react-instantsearch-hooks-web I get a type error on the Configure component, it appears it's no longer inferring the SearchOptions correctly. Downgrading to version 5.0.4 of typescript fixes the issue.

> tsc --noEmit

components/SearchApp/SearchApp.tsx:28:18 - error TS2322: Type '{ hitsPerPage: number; filters: string | undefined; }' is not assignable to type 'IntrinsicAttributes & PlainSearchParameters'.
  Property 'hitsPerPage' does not exist on type 'IntrinsicAttributes & PlainSearchParameters'.

28       <Configure hitsPerPage={hitsPerPage} filters={filters} />
                    ~~~~~~~~~~~

🔍 Steps to reproduce

1. Install the following packages react-instantsearch-hooks-web@6.44.1 typescript@5.1.3
2. Create a component with

<InstantSearch searchClient={searchClient} indexName={indexName}>
  <Configure hitsPerPage={hitsPerPage} filters={filters} />
  {children}
</InstantSearch>

4. Run tsc --noEmit

> tsc

components/SearchApp/SearchApp.tsx:28:18 - error TS2322: Type '{ hitsPerPage: number; filters: string | undefined; }' is not assignable to type 'IntrinsicAttributes & PlainSearchParameters'.
  Property 'hitsPerPage' does not exist on type 'IntrinsicAttributes & PlainSearchParameters'.

28       <Configure hitsPerPage={hitsPerPage} filters={filters} />
                    ~~~~~~~~~~~

Or checkout this repro https://stackblitz.com/edit/algolia-ts-bug-2mfs3u?file=app%2FSearchApp.tsx and run npm run typecheck in the terminal.

Live reproduction

https://stackblitz.com/edit/algolia-ts-bug-2mfs3u?file=app%2FSearchApp.tsx

💭 Expected behavior

There should be no typescript error as with previous versions of typescript.

Package version

react-instantsearch-hooks-web@6.44.1, typescript@5.1.3

Operating system

Windows, Linux

Browser

Chrome

Code of Conduct

• I agree to follow this project's Code of Conduct

[Haroenv]

I wonder if this is caused by PlainSearchParameters being extended from SearchOptions, but not manually retyping those keys? https://github.com/algolia/algoliasearch-helper-js/blob/develop/index.d.ts#L394

[jcwillox]

It seems the editor/typescript has trouble picking up the type of SearchOptions even when directly imported from algoliasearch-helper/types/algoliasearch and including it as a dependency. When importing SearchOptions directly from @algolia/client-search it does have the correct types but that's not surprising.

So perhaps its something to do with that PickForClient magic?

[jcwillox]

Currently, I'm just re-exporting the Configure component and including the SearchOptions type directly, which side-steps the issue without having to use @ts-ignore or type assertions.

import { SearchOptions } from "@algolia/client-search";
import {
  Configure as ConfigureAlgolia,
  ConfigureProps,
} from "react-instantsearch-hooks-web";

export const Configure = (props: ConfigureProps & SearchOptions) => (
  <ConfigureAlgolia {...props} />
);

[Haroenv]

Thanks for listing this workaround, we didn't find that option yet!

[RobinSCU]

Hi @Haroenv,

thanks for the fix! Do you have an ETA for a release where the fix is included?

Have a great day!

[Haroenv]

I've just released the fix in the helper, so if you re-update the dependencies, you will no longer have this issue.

[RobinSCU]

Thank you!

[g-mero]

Same issue on instantsearch.js

[Haroenv]

@g-mero, are you on the latest version of everything? This issue was fixed a couple months ago downstream

[Jorundur]

@Haroenv

I've got a similar issue after migrating from v6 to v7.

Packages:

  "react-instantsearch": "^7.4.1",
  "react-instantsearch-core": "^7.4.1",

Removed @types packages as per migration guide.

In a component I've got:

import { Configure, InstantSearch, useInfiniteHits } from 'react-instantsearch'

(previously this was imported from react-instantsearch-hooks-web)

render:

return (
    <div>
      <InstantSearch searchClient={searchClient} indexName={algoliaIndex}>
        <Configure filters={`productType:"${parentExpedition.productType}"`} hitsPerPage={4} />
        {/* irrelevant code removed */}
      </InstantSearch>
    </div>
  )

As mentioned above - the props type is PlainSearchParameters which doesn't have filters. Although PlainSearchParameters extends SearchOptions, SearchOptions doesn't have anything for filters either as far as I can see but I could be misunderstanding the PickForClient code.

Any ideas how to get this to work? I can see that the latest version (3.16.0) of algoliasearch-helper is being used.

[Haroenv]

I can't reproduce this in our examples, filters is correctly picked from algoliasearch (v4 and v3), we even have tests for it. If you can reproduce this consistently in a standalone environment, please create a sandbox, GitHub repo or similar and we can try to find the root cause @Jorundur

[Jorundur]

@Haroenv I just fixed this.

Had this warning when yarn-ing which I hadn't noticed:

"react-instantsearch > instantsearch.js@4.62.0" has unmet peer dependency "algoliasearch@>= 3.1 < 6".

Adding algoliasearch fixed this.

I didn't know that was required - it wasn't before when using v6 at least. So maybe it should be added to the migration guide? (Perhaps it's already there and I missed it).

[Haroenv]

It always was required, but in v6 there was no typescript types builtin. I believe v6 on DefinitelyTyped had a dependency on algoliasearch possibly though