error TS2322: Type '{ hitsPerPage: number; }' is not assignable to type 'IntrinsicAttributes & PlainSearchParameters'. Property 'hitsPerPage' does not exist on type 'IntrinsicAttributes & PlainSearchParameters'. 70 <Configure hitsPerPage={4} />

[spacecat]

🐛 Current behavior

error TS2322: Type '{ hitsPerPage: number; }' is not assignable to type 'IntrinsicAttributes & PlainSearchParameters'. Property 'hitsPerPage' does not exist on type 'IntrinsicAttributes & PlainSearchParameters'.

70

npm packages:

System: OS: macOS 14.6.1 CPU: (8) arm64 Apple M1 Memory: 112.45 MB / 16.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node npm: 10.1.0 - ~/.nvm/versions/node/v20.9.0/bin/npm Browsers: Chrome: 128.0.6613.114 Safari: 17.6 npmPackages: @algolia/autocomplete-js: 1.17.4 => 1.17.4 @algolia/autocomplete-plugin-query-suggestions: 1.17.4 => 1.17.4 @algolia/autocomplete-plugin-recent-searches: 1.17.4 => 1.17.4 @algolia/autocomplete-theme-classic: 1.17.4 => 1.17.4 @clerk/nextjs: 5.3.7 => 5.3.7 @floating-ui/react: 0.26.23 => 0.26.23 @headlessui/react: 0.0.0-insiders.557c103 => 0.0.0-insiders.557c103 @heroicons/react: ^2.1.5 => 2.1.5 @hookform/devtools: 4.3.1 => 4.3.1 @ianvs/prettier-plugin-sort-imports: 4.3.1 => 4.3.1 @tailwindcss/forms: 0.5.8 => 0.5.8 @tailwindcss/typography: 0.5.15 => 0.5.15 @types/node: 22.5.2 => 22.5.2 @types/react: 18.3.5 => 18.3.5 @types/react-dom: 18.3.0 => 18.3.0 @types/react-howler: 5.2.3 => 5.2.3 @types/react-scroll: 1.8.10 => 1.8.10 @types/react-timeago: 4.1.7 => 4.1.7 algoliasearch: 4.24.0 => 4.24.0 autoprefixer: 10.4.20 => 10.4.20 clsx: 2.1.1 => 2.1.1 date-fns: 3.6.0 => 3.6.0 eslint: 8.57.0 => 8.57.0 eslint-config-next: 14.2.7 => 14.2.7 eslint-config-prettier: 9.1.0 => 9.1.0 framer-motion: 11.3.31 => 11.3.31 justgage: 1.7.0 => 1.7.0 next: 14.2.7 => 14.2.7 next-themes: 1.0.0-beta.0 => 1.0.0-beta.0 postcss: 8.4.42 => 8.4.42 prettier: 3.3.3 => 3.3.3 prettier-plugin-tailwindcss: 0.6.6 => 0.6.6 react: 18.3.1 => 18.3.1 react-confetti: 6.1.0 => 6.1.0 react-countdown: 2.3.6 => 2.3.6 react-dom: 18.3.1 => 18.3.1 react-hook-form: 7.53.0 => 7.53.0 react-howler: 5.2.0 => 5.2.0 react-instantsearch: 7.13.0 => 7.13.0 react-responsive: 10.0.0 => 10.0.0 react-scroll: 1.9.0 => 1.9.0 react-select: ^5.8.0 => 5.8.0 react-toastify: 10.0.5 => 10.0.5 react-use: 17.5.1 => 17.5.1 sass: 1.77.8 => 1.77.8 swiper: 11.1.12 => 11.1.12 swr: 2.2.5 => 2.2.5 tailwind-merge: 2.5.2 => 2.5.2 tailwind-scrollbar: 3.1.0 => 3.1.0 tailwindcss: 3.4.10 => 3.4.10 typescript: 5.5.4 => 5.5.4

🔍 Steps to reproduce

1. Create a component:

"use client";

import React from "react";
import { Configure, Index } from "react-instantsearch";

export default function Page() {
  return (
    <div className="flex flex-col gap-y-6">
      <div>
        <Index
          indexName={process.env.blah ?? ""}
        >
          <Configure hitsPerPage={4} />

        </Index>
      </div>
    </div>
  );
}

2. See the squiggle red line under hitsPerPage

Live reproduction

Sorry, don't have time do to this right now

💭 Expected behavior

I expect the TypeScript error message to not show up when I run npx tsc

Package version

See above.

Operating system

No response

Browser

No response

Code of Conduct

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

[iggydotdev]

Same error here. Something is cooking on the typings. Just followed the building ui steps on algolia aaaaaand... no bueno.

Following the typings tracks I can get to this...

...which seems to indicate that the latest client (v5) uses the legacy search methods. Following a bit more I can see that is has been marked as deprecated...

Not sure if the problem is that on one of the other packages...

[Haroenv]

Both of you definitely don't have the same problem, as you are using different algoliasearch versions. Please make a reproduction and ensure you're on the latest version of InstantSearch and the algoliasearch-helper underlying library first though. Normally these issues are already solved, but maybe something weird is happening in the module resolution in your case.

The legacy type is indeed marked as deprecated, but that doesn't mean it doesn't work

[spacecat]

@Haroenv what do you mean by algolia-helper underlying library? Do you mean this?

algoliasearch: 4.24.0 => 4.24.0

If so, I tried installing the latest version (5.x.x) but it gives me other errors since it's a major version and comes with a lot of breaking changes.

My react-instantsearch is the latest however.

[Haroenv]

algoliasearch-helper is a dependency of React InstantSearch, which is different to algoliasearch. Algoliasearch v4 should work without issue (we have tests for it), so this probably is something in the setup, maybe multiple algoliasearch versions in node_modules, maybe a type doesn't get resolved correctly. Please create this in a reproducible example and we'll be able to investigate and fix.

[iggydotdev]

@spacecat Remove your node_modules and locks and do a clean install. I have tested this out with npm, yarn and pnpm and after a clean install, the types are resolving correctly.

[spacecat]

@iggydotdev tried removing node_modules and .lock file but I'm still getting that warning.

Btw, I should not need to delete the .lock file... that would mess up my entire project.

[rossanodr]

    const configureProps: ConfigureProps = {
        hitsPerPage: 4,

    } as ConfigureProps;
  <Configure {...configureProps} />

solved the problem here