<Configure /> types wrong or conflict with documentation

[Steve Wilcox]

🐛 Current behavior

In the documentation here,
https://www.algolia.com/doc/api-reference/widgets/configure/react/#widget-param-searchparameters

it outlines that you should be able to define a filter on the Configure component like so,

<Configure
  analytics={false}
  filters="free_shipping:true"
  hitsPerPage={40}
/>

Which does work as expected but when implemented in Typescript the following type error appears,
'filters' does not exist in type 'PlainSearchParameters'.

Are we potentially not implementing this correctly, could it be and issue with using react-instantsearch-nextjs or is there a problem with the libraries types?

Thanks!

🔍 Steps to reproduce

1. Create Next 14 boilerplate with typescript
2. Install react-instantsearch & react-instantsearch-nextjs
3. Implement Intant Search and Configure

Live reproduction

...

💭 Expected behavior

This is a development issue. No live preview required.

Package version

7.5.0

Operating system

No response

Browser

No response

Code of Conduct

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

[Haroen Viaene]

I believe you haven't installed algoliasearch, can you check that? There should be a warning in the install message too

[Steve Wilcox]

Can confirm we have been using algoliasearch 4.22.0

'use client';

import { Configure, ConfigureProps, Hits } from 'react-instantsearch';

import algoliasearch from 'algoliasearch';
import { InstantSearchNext } from 'react-instantsearch-nextjs';

const searchIndex = new String(
  process.env.NEXT_PUBLIC_ALGOLIA_INDEX_NAME
).toString();

export const client = algoliasearch(
  process.env.NEXT_PUBLIC_ALGOLIA_APP_ID!,
  process.env.NEXT_PUBLIC_ALGOLIA_API_KEY!
);

export function AlgoliaFacetSearch({
  primaryFacet = '',
  query = '',
  tags = [],
}) {
  const configureProps = {
    filters: `type:"${primaryFacet}"`,
    facets: ['*'],
    query: query,
    tagRefinements: tags,
    facetingAfterDistinct: true,
    hitsPerPage: 40,
  } as ConfigureProps;

  return (
    <InstantSearchNext
      indexName={searchIndex}
      searchClient={client}
      future={{
        preserveSharedStateOnUnmount: true,
      }}
    >
      <Hits />
      <Configure {...configureProps} />
    </InstantSearchNext>
  );
}

[Haroen Viaene]

Hey, I copied your code standalone, and everything seems to be working? Is there any package that could be stuck at an older version? Even transitive ones like algoliasearch-helper for example.

Here's my reproduction that has no typescript error: https://codesandbox.io/p/devbox/configure-works-nrlt73

[Steve Wilcox]

Our code works because we cast configureProps as ConfigureProps. codesandbox doesn't seem to be displaying type errors. I'll create a local copy, run in VSCode and get back to you.

[F. Levi]

Going from "instantsearch.js": "4.64.1" to "instantsearch.js": "4.64.3" does break types somehow.

The following starts erring, telling me hitsPerPage doesn't exist as an option.

connectConfigure(() => {})({
      searchParameters: { hitsPerPage: this.#hitsPerPage },
    })

[Haroen Viaene]

I don't think any change happened in those versions @flevi29, are you sure that was the only change?

[F. Levi]

All I know is that I reverted my update only on instantsearch.js from .3 to .1 and then it worked. But now that I'm trying to reproduce it, it no longer happens, for whatever reason.

I know that it was printing something like hitsPerPage doesn't exist on PlainSearchParameters & object, where PlainSearchParameters extends SearchOptions and SearchOptions might come from something weird and hacky that I don't know what to think about PickForClient with tons of @ts-ignores. Doing stuff like this might very well cause unexpected and erratic behavior.

[Haroen Viaene]

Sure, PickForClient is there to support many use cases for different versions of algoliasearch and ensuring that the parameters are maintained in a single place only. There however haven't been any changes to this code in a long time (definitely not between the last three patches of InstantSearch.js), so maybe it's a typescript compiler cache thing where it was evaluating just when you were reinstalling and thus there was no algoliasearch? If you can reproduce consistently we'll fix it of course

[Ra0R]

I was having the same issue. I think it might not be related to any changes within the library.
Initially I was not having the issue locally, but when building on the build server the error would arise.

Differences could potentially be, node version, yarn version or typescript version? (I was using an older version of node locally and the error was not arising).

[Haroen Viaene]

Did you resolve the problem on the build server in the end @Ra0R ?