react-instantsearch doesn't support algolia v5

[TheOrcDev]

🐛 Current behavior

I upgraded JavaScript API Client to version 5.13.0 successfully, but it is not compatible with InstantSearch component from react-instantsearch anymore.

This is the code:

import { searchClient as algoliaSearch } from "@algolia/client-search";

import { Configure, InstantSearch } from "react-instantsearch";

...

 <InstantSearch
      searchClient={searchClient} <------- here is the problem
      indexName={indexName}
      initialUiState={initialUiState ?? undefined}
    >
      <Configure
        aroundRadius={"all"}
        hitsPerPage={80}
        facetingAfterDistinct={true}
      />
      {children}
</InstantSearch>

The error is type related saying is not assignable to type 'SearchClient'

Is react-instantsearch going to be updated soon to support algolia v5?

🔍 Steps to reproduce

1. Install latest algolia
2. Install latest react-instantsearch
3. Try to use it

Live reproduction

https://www.algolia.com/doc/libraries/javascript/v5/upgrade

💭 Expected behavior

InstantSearch component shouldn't give any errors.

Package version

algoliasearch 5.13.0, react-instantsearch 7.13.7

Operating system

Mac OS 15.0.1

Browser

Chrome

Code of Conduct

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

[dhayab]

Hi, InstantSearch is typed to expect the API client coming from algoliasearch or algoliasearch/lite, not from the package you used. You should be able to switch to one of those imports with no impact on your codebase:

import { liteClient as algoliasearch } from 'algoliasearch/lite';
// or
import { algoliasearch } from 'algoliasearch';

[TheOrcDev]

Hi, InstantSearch is typed to expect the API client coming from algoliasearch or algoliasearch/lite, not from the package you used. You should be able to switch to one of those imports with no impact on your codebase:

import { liteClient as algoliasearch } from 'algoliasearch/lite';
// or
import { algoliasearch } from 'algoliasearch';

Thanks for answering so quickly! Tried that one already. Seems like it's working, but in both cases InstantSearch is still giving type errors. I'll copy you the entire thing here.

Type '{ transporter: Transporter; appId: string; clearCache(): Promise<void>; readonly _ua: string; addAlgoliaAgent(segment: string, version?: string | undefined): void; ... 5 more ...; search<T>(searchMethodParams: SearchMethodParams | LegacySearchMethodProps, requestOptions?: RequestOptions | undefined): Promise<...>; }' is not assignable to type 'SearchClient'.
  Types of property 'search' are incompatible.
    Type '<T>(searchMethodParams: SearchMethodParams | LegacySearchMethodProps, requestOptions?: RequestOptions | undefined) => Promise<...>' is not assignable to type '<T>(requests: { indexName: string; params: SearchOptions; }[]) => Promise<MultipleQueriesResponse<T>>'.
      Types of parameters 'searchMethodParams' and 'requests' are incompatible.
        Type '{ indexName: string; params: SearchOptions; }[]' is not assignable to type 'SearchMethodParams | LegacySearchMethodProps'.
          Type '{ indexName: string; params: SearchOptions; }[]' is not assignable to type 'LegacySearchMethodProps'.
            Type '{ indexName: string; params: SearchOptions; }' is not assignable to type 'LegacySearchQuery'.
              Type '{ indexName: string; params: SearchOptions; }' is not assignable to type 'LegacySearchForHits'.
                Type '{ indexName: string; params: SearchOptions; }' is not assignable to type 'LegacySearchParams'.
                  Types of property 'params' are incompatible.
                    Type 'SearchOptions' is not assignable to type 'SearchParamsObject'.
                      Type 'SearchOptions' is not assignable to type 'BaseSearchParamsWithoutQuery'.
                        Types of property 'facetFilters' are incompatible.
                          Type 'string | readonly string[] | readonly (string | readonly string[])[] | undefined' is not assignable to type 'FacetFilters | undefined'.
                            Type 'readonly string[]' is not assignable to type 'FacetFilters | undefined'.
                              The type 'readonly string[]' is 'readonly' and cannot be assigned to the mutable type 'FacetFilters[]'.ts(2322)
InstantSearch.d.ts(42, 5): The expected type comes from property 'searchClient' which is declared here on type 'IntrinsicAttributes & UseInstantSearchApiProps<UiState, UiState> & { children?: ReactNode; }'

[dhayab]

There could be a version conflict in your package dependencies.

Could you ideally reproduce this behavior using the following sandbox as a starting point: https://codesandbox.io/p/sandbox/gh-6426-rhlwdn?

You can also check that if you have declared multiple algoliasearch related packages, that they target the same version (but you only need algoliasearch).

[JClackett]

Also facing this, I have:

"react-instantsearch": "7.13.9",
"algoliasearch": "5.18.0",

Client imported like:

import { algoliasearch } from 'algoliasearch';

export const searchClient = algoliasearch(...)

Error:

Type 'Algoliasearch' is not assignable to type 'SearchClient'.
  Types of property 'searchForFacetValues' are incompatible.
    Type '({ indexName, facetName, searchForFacetValuesRequest }: SearchForFacetValuesProps, requestOptions?: RequestOptions | undefined) => Promise<SearchForFacetValuesResponse>' is not assignable to type 'undefined'.ts(2322)
InstantSearch.d.ts(42, 5): The expected type comes from property 'searchClient' which is declared here on type 'IntrinsicAttributes & UseInstantSearchApiProps<UiState, UiState> & { children?: ReactNode; }

[Haroenv]

in some configurations of typescript (not sure which ones yet, as I haven't been able to reproduce) only algoliasearch lite is supported (just the types, the code always works):

import { liteClient as algoliasearch } from 'algoliasearch/lite'

[JClackett]

@Haroenv It seems in v5, algolia/lite isnt a thing anymore though?

[Haroenv]

it still is, we use it in our examples:

instantsearch/examples/react/getting-started/src/App.tsx

Line 1 in 392a65b

import { liteClient as algoliasearch } from 'algoliasearch/lite';

[JClackett]

@Haroenv ahh, youre right, probably just needed to restart tsserver!

Any ideas about all the errors relating to react 19 and "'InstantSearch' cannot be used as a JSX component."?

[diced-dev]

Same issue after upgrading.

Seems like SearchClient is being redefined in the algoliasearch-helper package for use in the InstantSearch mono repo but that means it's no longer compatible with algoliasearch type for SearchClient.

[aymeric-giraudet]

Hey @JClackett this should be solved with #6520, you can test by installing it with this :

yarn add https://pkg.csb.dev/algolia/instantsearch/commit/6b87cac8/react-instantsearch

Couldn't reproduce the algoliasearch issue with algoliasearch/lite v5 though