React InstantSearch for Next js (.tsx) routing showing error

[indrasenakatam]

import singletonRouter from "next/router";

as I have followed the below documentation and example but still facing the issue.
https://www.algolia.com/doc/guides/building-search-ui/getting-started/react/
https://github.com/algolia/instantsearch/tree/master/examples/react/next

[dhayab]

Hi, it seems you're using createInstantSearchRouterNext in Next 13 with App router. This will not work. For the App router, you can follow this guide: https://www.algolia.com/doc/guides/building-search-ui/going-further/server-side-rendering/react/#app-router-experimental.

[indrasenakatam]

https://www.algolia.com/doc/ui-libraries/autocomplete/integrations/with-react-instantsearch/

import React from "react";
import {
  createElement,
  Fragment,
  useEffect,
  useRef,
  useState
} from "react";
import { render } from "react-dom";

import { usePagination, useSearchBox } from "react-instantsearch-hooks";
import { autocomplete, AutocompleteOptions } from "@algolia/autocomplete-js";
import { BaseItem } from "@algolia/autocomplete-core";

import "@algolia/autocomplete-theme-classic";

type AutocompleteProps = Partial<AutocompleteOptions<BaseItem>> & {
  className?: string;
};

type SetInstantSearchUiStateOptions = {
  query: string;
};

export function Autocomplete({
  className,
  ...autocompleteProps
}: AutocompleteProps) {
  const autocompleteContainer = useRef<HTMLDivElement>(null);

  const { query, refine: setQuery } = useSearchBox();
  const { refine: setPage } = usePagination();

  const [instantSearchUiState, setInstantSearchUiState] = useState<
    SetInstantSearchUiStateOptions
  >({ query });

  useEffect(() => {
    setQuery(instantSearchUiState.query);
    setPage(0);
  }, [instantSearchUiState]);

  useEffect(() => {
    if (!autocompleteContainer.current) {
      return;
    }

    const autocompleteInstance = autocomplete({
      ...autocompleteProps,
      container: autocompleteContainer.current,
      initialState: { query },
      onReset() {
        setInstantSearchUiState({ query: "" });
      },
      onSubmit({ state }) {
        setInstantSearchUiState({ query: state.query });
      },
      onStateChange({ prevState, state }) {
        if (prevState.query !== state.query) {
          setInstantSearchUiState({
            query: state.query
          });
        }
      },
      renderer: { createElement, Fragment, render },
    });

    return () => autocompleteInstance.destroy();
  }, []);

  return <div className={className} ref={autocompleteContainer} />;
}

As I followed this tutorial and implemented auto-complete js example but showing above error.

Next.js 13.5.4

[Haroenv]

is the autocomplete component used inside <InstantSearch/>?

[indrasenakatam]

have tried with both InstantSearch and InstantSearchNext both are getting the same error

InstantSearchNext

InstantSearch

and the issue coming from Autocomplete.tsx Hooks must be used inside the <InstantSearch> component.
https://github.com/algolia/autocomplete/blob/next/examples/react-instantsearch-hooks/src/components/Autocomplete.tsx

[indrasenakatam]

So far, I have not found any autocomplete searches for Next 13 (React: latest).
Could you please share updated references (if any) that we can follow?
Thankyou very much in advance.

confusing, which we need to follow up on, and most of the examples are not working directly with the latest versions.

https://www.algolia.com/developers/code-exchange/instantsearch-and-next-js-starter/
https://www.algolia.com/developers/code-exchange/autocomplete-starter/
https://www.algolia.com/doc-beta/ui-libraries/autocomplete/integrations/with-react-instantsearch
https://www.algolia.com/doc/guides/building-search-ui/going-further/server-side-rendering/react/#app-router-experimental
https://www.algolia.com/doc/ui-libraries/autocomplete/integrations/with-react-instantsearch/

[indrasenakatam]

Can anyone please share the NextJS autocomplete + InstantSearch component example for Next?

https://github.com/algolia/autocomplete/tree/next/examples/react-instantsearch 
is not working with Next (13.X) with React (18.0), and multiple issues are observed while updating the code to make it work.

Thank you in advance.

[milameko]

Did you find a solution to this issue? I am facing the same problem.