React InstantSearch Not Working?

Hey everyone! I’m sure I’m just doing something wrong but I can’t seem to get React InstantSearch to work. My codesandbox:

My React Code:

import algoliasearch from "algoliasearch/lite";
import { InstantSearch, SearchBox, Hits } from "react-instantsearch-dom";

const searchClient = algoliasearch(
  "5C41K6G5KU",
  "624639fb5e6e1f23ea6b7fb0c9f3dfa8"
);

export default function App() {
  return (
    <InstantSearch searchClient={searchClient} indexName="MovieIndex">
      <SearchBox />
      <Hits />
    </InstantSearch>
  );
}

This is based on code from this page: How to install React InstantSearch | Algolia

Issues I’m Seeing:

  • Search box doesn’t allow me to type
  • No hits visible (even though I can see the response coming back in the network tab)

What I’ve Tried

  • Originally was trying to do this in NextJs and though maybe it was related to NextJS so I moved it to CodeSandbox and see the same issues
  • Have tried alternate App IDs and Keys. (FYI, the key I’m using is NOT the admin key)
  • Have renamed the Index to see if that would change anything.

Thanks so much in advance for any help.

At least on CodeSandbox this looks like a rendering issue. I swapped out to the old style ReactDOM renderer in your index.js and it worked fine. It looks like the CodeSandbox is trying to us React 18 with createRoot and that seems to be causing issues with InstantSearch.

index.js:

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

Chuck,

You are a lifesaver. That absolutely fixed it. Thanks so much.

Best,
Brad

Adding this here in case anyone else has this problem…

The root cause was that I was running React in Strict mode which seems to break the components. More details are here: next.config.js: React Strict Mode | Next.js

Changing from strict mode = true to strict mode = false resolved the issue.

3 Likes