2

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?

Amila Senadheera
  • 12,229
  • 15
  • 27
  • 43
rstojano
  • 159
  • 4
  • 14
  • Are you wrapping the app/pages with the [`InstantSearch`](https://www.algolia.com/doc/api-reference/widgets/instantsearch/react/) provider? – juliomalves Mar 25 '22 at 19:02
  • Yes, I am, but even if I don't import the SearchBox anywhere I get this crash. – rstojano Mar 31 '22 at 17:21

1 Answers1

0

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.

Eric Aya
  • 69,473
  • 35
  • 181
  • 253
juan
  • 11
  • 3