<Configure /> types wrong or conflict with documentation

[stwilz]

🐛 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

[Haroenv]

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

[stwilz]

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>
  );
}

[Haroenv]

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

[stwilz]

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.

[flevi29]

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 },
    })

[Haroenv]

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

[flevi29]

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.

[Haroenv]

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).

[Haroenv]

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

[Ra0R]

@Haroenv I did not, I used the workaround by casting it to the correct type.

I am not sure what causes the issue.

[S-Blank]

I've encountered an issue with hitsPerPage.

Here's my code:

<Configure hitsPerPage={5} />

TypeScript gives me the following error:

Type '{ hitsPerPage: number; }' is not assignable to type 'IntrinsicAttributes & PlainSearchParameters'.
Property 'hitsPerPage' does not exist on type 'IntrinsicAttributes & PlainSearchParameters'.ts(2322)

Installed packages:

• "react-instantsearch": "^7.11.2"
• "algoliasearch": "^4.23.3"

Any help on resolving this issue would be greatly appreciated!

[Haroenv]

Do you have a reproduction @S-Blank?

[S-Blank]

@Haroenv Here is my code:

"use client";

import algoliasearch from "algoliasearch/lite";
import { InstantSearch, SearchBox, Hits, Configure } from "react-instantsearch";
import Image from "next/image";

const searchClient = algoliasearch("###", "###");

const Hit = ({
  hit,
}: {
  hit: { id: string; name: string; imageSrc: string; shopId: string };
}) => {
  return (
    <article>
      <Image
        src={hit.imageSrc}
        alt={hit.name}
        width={100}
        height={100}
        className="h-10"
      />
      <p>{hit.name}</p>
    </article>
  );
};

const Search = () => {
  return (
    <InstantSearch searchClient={searchClient} indexName="indexName" insights>
      <SearchBox />
      <Configure hitsPerPage={5} />
      <Hits hitComponent={Hit} />
    </InstantSearch>
  );
};

export default Search;