algolia / algolia/doc-code-samples

Cannot read property 'instantSearchInstance' of undefined

Open
#249 11 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
99
Forks
122
PR merge metrics
No merged PRs in 30d

Description

I followed the intruction like this package project. i am using vue-instantsearch 4.0.0 for vuejs 3

I copied script like below:

```

import algoliasearch from 'algoliasearch/lite'
import { h, onMounted, Fragment, render, ref } from 'vue'
import { useRouter } from 'vue-router'
import { createElement } from '../composables/adapter'

export default {

data(){
return {
searchClient: algoliasearch(
"latency",
"6be0576ff61c053d5f9a3225e2a90f76"
),
}
},
setup(){

onMounted(() => {
})

return {

}
}

}

.container {
max-width: 1200px;
margin: 0 auto;
padding: 1rem;
}
.search-panel {
display: flex;
}
.search-panel__filters {
flex: 1;
}
.search-panel__results {
flex: 3;
}
.searchbox {
margin-bottom: 2rem;
}
.pagination {
margin: 2rem auto;
text-align: center;
}

```
But the result is error in console.

> Uncaught (in promise) TypeError: Cannot read property 'instantSearchInstance' of undefined
> 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 callHookFromMixins (runtime-core.esm-bundler.js?5c40:5914)
> at callSyncHook (runtime-core.esm-bundler.js?5c40:5890)
> at applyOptions (runtime-core.esm-bundler.js?5c40:5825)
> at finishComponentSetup (runtime-core.esm-bundler.js?5c40:6503)
> at setupStatefulComponent (runtime-core.esm-bundler.js?5c40:6436)
> at setupComponent (runtime-core.esm-bundler.js?5c40:6376)
> eval @ widget.js?c00b:1
> created @ widget.js?c00b:1

Btw, i have same settings in main.js
```
import InstantSearch from 'vue-instantsearch/vue3/es'
import { projectAuth } from './firebase/config'

let app

projectAuth.onAuthStateChanged(() => {
if(!app){
app = createApp(App)
.use(router)
.use(store)
.use(Notifications)
.use(InstantSearch)
.mount('#app')
}
})
```

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with the component shown in the issue and compare its Vue InstantSearch usage with the main.js plugin registration. Reproduce the Vue 3 error using vue-instantsearch 4.0.0, then trace the reported instantSearchInstance access. Done means the supplied example mounts without the reported console error.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
32/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.