[Unhandled promise rejection: Error: Uncaught, unspecified "error" event. ([object Object])]

[SohelIslamImran]

🐛 Bug description

I'm using React Native Expo Project. On android emulator, I'm getting this error. I followed the documentation same as here . But On real device and Expo Go app, it is working.

[Unhandled promise rejection: Error: Uncaught, unspecified "error" event. ([object Object])]
at node_modules\@algolia\events\events.js:62:18 in EventEmitter.prototype.emit
at node_modules\instantsearch.js\cjs\lib\InstantSearch.js:456:8 in mainHelper.on$argument_1
at node_modules\@algolia\events\events.js:81:8 in EventEmitter.prototype.emit
at node_modules\algoliasearch-helper\src\algoliasearch.helper.js:1360:2 in AlgoliaSearchHelper.prototype._dispatchAlgoliaError  
at node_modules\promise\setimmediate\core.js:37:13 in tryCallOne
at node_modules\promise\setimmediate\core.js:123:24 in setImmediate$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:248:12 in _allocateCallback$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:112:14 in _callTimer
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:162:14 in _callReactNativeMicrotasksPass
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:413:41 in callReactNativeMicrotasks
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:391:6 in __callReactNativeMicrotasks
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:133:6 in __guard$argument_0
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:368:10 in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:132:4 in flushedQueue

🔍 Bug reproduction

Steps to reproduce the behavior: React InstantSearch Hooks throwing me error on android studio emulator react native expo project.

Live reproduction:

https://codesandbox.io/s/github/algolia/react-instantsearch/tree/master/examples/hooks

💭 Expected behavior

Please resolved this issue as soon as possible.

🖥 Screenshots

Environment

• React InstantSearch Hooks version: 6.29.0
• React version: 17.0.2
• Browser: Android Studio Emulator Expo
• OS: Windows

Additional context

[SohelIslamImran]

"algoliasearch": "^4.13.1",
"expo": "^45.0.5",
"react-native": "0.68.2",

[SohelIslamImran]

Can't understand What is the problem. Previously it was working

[Haroenv]

When you mean previously @SohelIslamImran, what have you changed?

[SohelIslamImran]

When you mean previously @SohelIslamImran, what have you changed?

Version of React InstantSearch Hooks

[Haroenv]

You didn't mention which version of React InstantSearch Hooks you used before and after the change, could you clarify? The codesandbox example you sent earlier isn't for react native, so if you have a reproduction on GitHub or somewhere else, that would help!

[SohelIslamImran]

You didn't mention which version of React InstantSearch Hooks you used before and after the change, could you clarify? The codesandbox example you sent earlier isn't for react native, so if you have a reproduction on GitHub or somewhere else, that would help!

I was frequently updated. So I don't remember. But now I tried to downgrade to 6.28.0, 6.27.6, 6.26.6, 6.24.6, 6.22.6 ..., Still the error. I'm working on a private repo of a company project... So It is difficult to Share an example repo.

import algoliasearch from "algoliasearch";
import { InstantSearch } from "react-instantsearch-hooks";
import { isDev } from "./platforms";

// components
import Spacer from "../../../components/ui/Spacer";
import SearchItem from "../components/SearchItem";
import { SearchBox } from "../../components/forms";
import SearchedList from "../../components/SearchedList";

const algoliaClient = algoliasearch(algoliaAppId, algoliaApiKey);
const algoliaUsersIndex = isDev ? "dev_users" : "prod_users";

const SearchInboxScreen = ({ navigation }) => (
  <InstantSearch searchClient={algoliaClient} indexName={algoliaUsersIndex}>
    <Spacer mt={15}>
      <SearchBox autoFocus />
    </Spacer>

    <SearchedList
      resultTitle="User"
      keyboardShouldPersistTaps="handled"
      renderItem={(item) => <SearchItem item={item} navigation={navigation} />}
    />
  </InstantSearch>
);

export default SearchInboxScreen;

// SearchBox.js
import { useSearchBox } from "react-instantsearch-hooks";

const SearchBox = ({....}) => {
  const { query, refine, clear } = useSearchBox();
  ......
  return (
  .....
  )
 }
 export default SearchBox;

// SearchedList.js
import { useInfiniteHits, useSearchBox } from "react-instantsearch-hooks";

const SearchedList = ({....}) => {
  const { hits, isLastPage, showMore } = useInfiniteHits();
  const { isSearchStalled, query } = useSearchBox();
    ......
  return (
  .....
  )
 }
 export default SearchedList;

This is working on physical device but getting this error on android.

[Unhandled promise rejection: Error: Uncaught, unspecified "error" event. ([object Object])]
at node_modules\@algolia\events\events.js:62:18 in EventEmitter.prototype.emit
at node_modules\instantsearch.js\cjs\lib\InstantSearch.js:456:8 in mainHelper.on$argument_1
at node_modules\@algolia\events\events.js:81:8 in EventEmitter.prototype.emit
at node_modules\algoliasearch-helper\src\algoliasearch.helper.js:1360:2 in AlgoliaSearchHelper.prototype._dispatchAlgoliaError  
at node_modules\promise\setimmediate\core.js:37:13 in tryCallOne
at node_modules\promise\setimmediate\core.js:123:24 in setImmediate$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:248:12 in _allocateCallback$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:112:14 in _callTimer
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:162:14 in _callReactNativeMicrotasksPass
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:413:41 in callReactNativeMicrotasks
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:391:6 in __callReactNativeMicrotasks
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:133:6 in __guard$argument_0
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:368:10 in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:132:4 in flushedQueue

[SohelIslamImran]

[JanKups]

Having the same issue, even with a fully new basic test app.

import type { NextPage } from "next";
import algoliasearch from "algoliasearch/lite";
import { InstantSearch, Hits } from "react-instantsearch-hooks-web";

const searchClient = algoliasearch(
  "KEY",
  "ID"
);

const Home: NextPage = () => {
  return (
    <InstantSearch searchClient={searchClient} indexName="dev">
    <Hits hitComponent={({ hit }) => hit.objectID} />
    </InstantSearch>
  );
};

export default Home;

{
  "name": "algolia-test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "algoliasearch": "^4.13.1",
    "next": "12.2.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-instantsearch-hooks-web": "^6.30.0"
  },
  "devDependencies": {
    "@types/node": "18.0.3",
    "@types/react": "18.0.15",
    "@types/react-dom": "18.0.6",
    "eslint": "8.19.0",
    "eslint-config-next": "12.2.0",
    "typescript": "4.7.4"
  }
}

[Haroenv]

The components are made for the web @JanKups, not sure why the error is so cryptic, but you should be using useHits from react-instantsearch-hooks

[JanKups]

The components are made for the web @JanKups, not sure why the error is so cryptic, but you should be using useHits from react-instantsearch-hooks

Above example is a web project (Next.js) and is a copy from the docs. With a similar error as above (Error: Uncaught, unspecified "error" event. ([object Object]))

[Haroenv]

Did you fill in the api key / app id as in your code sample that was sent? if you have it online somewhere I'd love to have a look. I also opened a PR as I think I found the source of the cryptic error throwing (https://github.com/algolia/instantsearch.js/pull/5075)

[JanKups]

Did you fill in the api key / app id as in your code sample that was sent? if you have it online somewhere I'd love to have a look. I also opened a PR as I think I found the source of the cryptic error throwing (algolia/instantsearch.js#5075)

Great, some more info on the error might help. The sample code is online: [removed]

[Haroenv]

In this case the error is indeed because the appId is fake which doesn't exist, the error after the PR on InstantSearch.js it will be clearer

[JanKups]

In this case the error is indeed because the appId is fake which doesn't exist, the error after the PR on InstantSearch.js it will be clearer

It was the indexName that did not exist (after some changes). Although it's pretty stupid a better error will save the next person a lot of time. Thanks for helping out!

[Izhaki]

Same issue here. An hour spent because Algolia credentials where missing NEXT_PUBLIC_ prefix in env.

Library should really throw something like "missing X or Y" in these cases.

[Haroenv]

If you update to InstantSearch.js 4.43.1 (via yarn upgrade for example) this error will no longer show up, and instead a more relevant error for the javascript client will show

[Izhaki]

We've just follow the docs and got:

    "algoliasearch": "^4.13.1",
    "react-instantsearch-hooks-web": "^6.30.0",

These should be latest. So I'm not sure how to update InstantSearch.

[Haroenv]

Sorry, I meant the transitive dependency, which you can update via the lock file or resolutions. I'll make a PR here to make sure it's the latest too

[Haroenv]

6.30.1 now has this fixed out of the box