In my VueJS 3.0 project using the Options API, I have integrated Firebase and Algolia successfully. While I am able to search multiple indices in Algolia using custom Vue code, I would prefer to utilize vue-instantsearch from Algolia. However, despite my attempts to set up basic search functionality for one index (companyIndex), I am encountering an error that includes my keys:
[Vue warn]: Unhandled error during execution of created hook
at <AisSearchBox>
at <AisInstantSearch search-client= {transporter: {…}, appId: '#########', addAlgoliaAgent: ƒ, clearCache: ƒ, search: ƒ, …}addAlgoliaAgent: ƒ (e,t)appId: "#########"clearCache: ƒ ()initIndex: ƒ (t)multipleQueries: ƒ (t,n)multipleSearchForFacetValues: ƒ (t,o)search: ƒ (t,n)searchForFacetValues: ƒ (t,o)transporter: {hostsCache: {…}, logger: {…}, requester: {…}, requestsCache: {…}, responsesCache: {…}, …}[[Prototype]]: Object index-name="companyIndex" >
at <Home onAuthenticated=fn<setAuthenticatedUser> onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > >
at <RouterView onAuthenticated=fn<setAuthenticatedUser> >
at <App>
...
runtime-core.esm-bundler.js?5c40:38 [Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue-next
at <AisSearchBox>
at <AisInstantSearch search-client= {transporter: {…}, appId: '#########', addAlgoliaAgent: ƒ, clearCache: ƒ, search: ƒ, …} index-name="companyIndex" >
at <Home onAuthenticated=fn<setAuthenticatedUser> onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > >
at <RouterView onAuthenticated=fn<setAuthenticatedUser> >
at <App>
...
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'instantSearchInstance')
at Proxy.eval (widget.js?c00b:1)
at Proxy.created (widget.js?c00b:1)
at callWithErrorHandling (runtime-core.esm-bundler.js?5c40:154)
at callWithAsyncErrorHandling (runtime-core.esm-bundler.js?5c40:163)
at callHook (runtime-core.esm-bundler.js?5c40:3177)
at applyOptions (runtime-core.esm-bundler.js?5c40:3107)
at finishComponentSetup (runtime-core.esm-bundler.js?5c40:7218)
at setupStatefulComponent (runtime-core.esm-bundler.js?5c40:7143)
at setupComponent (runtime-core.esm-bundler.js?5c40:7074)
at mountComponent (runtime-core.esm-bundler.js?5c40:5079)
Below is my main.js file:
import { createApp } from 'vue'
import { fbAuth } from '@/firebase/config'
import App from '@/App.vue'
import router from '@/router'
import VTooltip from 'v-tooltip'
import 'v-tooltip/dist/v-tooltip.css'
import InstantSearch from 'vue-instantsearch/vue3/es'
let app
fbAuth.onAuthStateChanged(_user => {
if (!app) {
app = createApp(App)
app.use(VTooltip, {
defaultDelay: {
show: 500,
hide: 500
}
})
app.use(InstantSearch)
app.use(router).mount('#app')
}
})
And here is a summary of my component:
<template>
...
<ais-instant-search :search-client="searchClient" index-name="companyIndex">
<ais-search-box />
<ais-hits>
<template v-slot:item="{ item }">
<h2>{{ item.name }}</h2>
</template>
</ais-hits>
</ais-instant-search>
...
</template>
<script>
import algoliasearch from 'algoliasearch/lite'
import { AisInstantSearch, AisSearchBox } from 'vue-instantsearch/vue3/es'
...
export default {
name: 'Search',
components: {
AisInstantSearch,
AisSearchBox,
...
},
props: [...],
setup(props) {
...
const searchClient = algoliasearch(
'#######',
'#######'
)
...
return {
...
searchClient,
...
}
}
}
</script>
What could be causing this issue?