#community-help

Connecting React Instant Search with Typesense Adapter

TLDR KARTHICK sought help with an error when using Typesense Adapter for React Instant Search. Jason advised substituting import statements. After uninstalling the react-instantsearch-dom package, KARTHICK resolved the issue.

Powered by Struct AI

1

10
6mo
Solved
Join the chat
May 25, 2023 (6 months ago)
KARTHICK
Photo of md5-9885c2d5db3a85d24bc9c11809bcaf50
KARTHICK
10:54 AM
• Is this is the only way to connect.
• If we need React instant search web hook widget we need to connect through algolia search alone.
import algoliasearch from 'algoliasearch/lite';
import { InstantSearch, SearchBox } from 'react-instantsearch-hooks-web';

const searchClient = algoliasearch('undefined', 'undefined');

function App() {
  return (
    <InstantSearch searchClient={searchClient} indexName="instant_search">
      <SearchBox />
    </InstantSearch>
  );
}

• Right now in using typesense-instantsearch-adapter with react instant search dom.
• If any one know solution for this please reply in the thread.
Kishore Nallan Jason
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
03:34 PM
You don’t have to use the algoliasearch client.
03:35
Jason
03:35 PM
The instructions for react-instantsearch-dom are the same as for react instantsearch hooks: https://github.com/typesense/typesense-instantsearch-adapter#with-react-instantsearch
03:35
Jason
03:35 PM
You only have to change the import statement
May 26, 2023 (6 months ago)
KARTHICK
Photo of md5-9885c2d5db3a85d24bc9c11809bcaf50
KARTHICK
04:21 AM
When i change the import statement from
import { InstantSearch } from 'react-instantsearch-dom';
to
import { InstantSearch } from 'react-instantsearch-hooks-web';

Im getting this error
Image 1 for When i change the import statement from
```import { InstantSearch } from 'react-instantsearch-dom';
to
import { InstantSearch } from 'react-instantsearch-hooks-web';

Im getting this error```
04:23
KARTHICK
04:23 AM
Please guide me how to resolve this error and make work things properly. Jason Kishore Nallan
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
04:27 AM
That doesn’t look like an error related to Typesense… And I’m not familiar enough with react instantsearch to be able to help. I would recommend posting on Stackoverflow or open an issue in the react instantsearch repo
KARTHICK
Photo of md5-9885c2d5db3a85d24bc9c11809bcaf50
KARTHICK
04:34 AM
const typesenseInstantsearchAdapter = new TypesenseInstantSearchAdapter({
  server: typesenseSearchClient.server,
  apiKey: typesenseSearchClient.apiKey,
  additionalHeaders: {
    'X-Custom-Header': 'Value'
  }
});

const App = () => {
  return (
    <InstantSearch
      indexName="your_typesense_index_name"
      searchClient={typesenseInstantsearchAdapter}
    >
      <SearchBox />
      <Hits />
    </InstantSearch>
  );
};
04:34
KARTHICK
04:34 AM
I have setup like this is their any issue in this config file. Jason
04:47
KARTHICK
04:47 AM
Jason I have uninstalled react-instantsearch-dom package and this issue got resolved.Thanks for your time.

1

Typesense

Lightning-fast, open source search engine for everyone | Knowledge Base powered by Struct.AI

Indexed 3011 threads (79% resolved)

Join Our Community