NextJS React Prerendering issue with Algolia connectSearchBox

Question

I'm working with Algolia instant search for react, and I'm using a custom SearchBox component which I've written like so:

import { connectSearchBox } from "react-instantsearch-dom";

import InputText from "components/common/InputText";

interface SearchBoxProps {
  currentRefinement: string;
  refine: (...args: any[]) => any;
  setSearch: (search: string) => void;
}

const SearchBox = connectSearchBox(
  ({ setSearch, currentRefinement, refine }: SearchBoxProps) => {
    return (
      <InputText
        className="my-4"
        leftIcon={{ icon: "search" }}
        placeholder="What are you looking for?"
        value={currentRefinement}
        onChange={(event) => {
          const text = event.currentTarget.value;
          setSearch(text);
          refine(text);
        }}
      />
    );
  }
);

export default SearchBox;

And without even importing this component anywhere, upon building the nextjs app for production, I get the following error:

Error occurred prerendering page "/explore/SearchBox". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: this.props.contextValue.store.getState is not a function

How can I fix this prerendering issue?

Answer 1

I was having the same error just now in Next.js for my custom Hits component, my error was that I created a search folder inside pages with an index.js and a components sub-folder, once I moved the components to my componens folder outside the pages it worked.