Skip to content

Instantly share code, notes, and snippets.

@ibrahimhajjaj
Last active December 8, 2021 12:59
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save ibrahimhajjaj/02ee72c60619bb70e8e2d3c92e03ed6e to your computer and use it in GitHub Desktop.
window.Vue = require('vue').default;
try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
require('./bootstrap');
require('datatables.net');
} catch (e) {console.log('error')}
import Alpine from 'alpinejs';
window.Alpine = Alpine;
Alpine.start();
Vue.config.productionTip = false;
import InstantSearch from 'vue-instantsearch';
Vue.use(InstantSearch);
import searchStoresComponent from './components/searchStoresComponent.vue';
new Vue({
el: '#autocomplete',
render: h => h(searchStoresComponent),
});
app.js:78834
[Vue warn]: Property or method "searchClient" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
---> <SearchStoresComponent> at resources/js/components/searchStoresComponent.vue
<Root>
warn @ app.js:78834
warnNonPresent @ app.js:80260
get @ app.js:80315
render @ app.js:78020
Vue._render @ app.js:81777
updateComponent @ app.js:82289
get @ app.js:82703
Watcher @ app.js:82692
mountComponent @ app.js:82296
Vue.$mount @ app.js:87302
Vue.$mount @ app.js:90216
init @ app.js:81348
createComponent @ app.js:84228
createElm @ app.js:84175
patch @ app.js:84766
Vue._update @ app.js:82168
updateComponent @ app.js:82289
get @ app.js:82703
Watcher @ app.js:82692
mountComponent @ app.js:82296
Vue.$mount @ app.js:87302
Vue.$mount @ app.js:90216
Vue._init @ app.js:83236
Vue @ app.js:83303
./resources/js/app.js @ app.js:14392
__webpack_require__ @ app.js:90271
(anonymous) @ app.js:90436
__webpack_require__.O @ app.js:90308
(anonymous) @ app.js:90438
(anonymous) @ app.js:90440
app.js:78834
[Vue warn]: Invalid prop: type check failed for prop "searchClient". Expected Object, got Undefined
found in
---> <AisInstantSearch>
<SearchStoresComponent> at resources/js/components/searchStoresComponent.vue
<Root>
warn @ app.js:78834
assertProp @ app.js:79919
validateProp @ app.js:79845
loop @ app.js:82886
initProps @ app.js:82917
initState @ app.js:82860
Vue._init @ app.js:83224
VueComponent @ app.js:83372
createComponentInstanceForVnode @ app.js:81515
init @ app.js:81344
createComponent @ app.js:84228
createElm @ app.js:84175
patch @ app.js:84727
Vue._update @ app.js:82168
updateComponent @ app.js:82289
get @ app.js:82703
Watcher @ app.js:82692
mountComponent @ app.js:82296
Vue.$mount @ app.js:87302
Vue.$mount @ app.js:90216
init @ app.js:81348
createComponent @ app.js:84228
createElm @ app.js:84175
patch @ app.js:84766
Vue._update @ app.js:82168
updateComponent @ app.js:82289
get @ app.js:82703
Watcher @ app.js:82692
mountComponent @ app.js:82296
Vue.$mount @ app.js:87302
Vue.$mount @ app.js:90216
Vue._init @ app.js:83236
Vue @ app.js:83303
./resources/js/app.js @ app.js:14392
__webpack_require__ @ app.js:90271
(anonymous) @ app.js:90436
__webpack_require__.O @ app.js:90308
(anonymous) @ app.js:90438
(anonymous) @ app.js:90440
Show 9 more frames
app.js:78834
[Vue warn]: Error in data(): "Error: The `searchClient` option is required.
See documentation: https://www.algolia.com/doc/api-reference/widgets/instantsearch/js/"
found in
---> <AisInstantSearch>
<SearchStoresComponent> at resources/js/components/searchStoresComponent.vue
<Root>
warn @ app.js:78834
logError @ app.js:80106
globalHandleError @ app.js:80101
handleError @ app.js:80061
getData @ app.js:82969
initData @ app.js:82924
initState @ app.js:82863
Vue._init @ app.js:83224
VueComponent @ app.js:83372
createComponentInstanceForVnode @ app.js:81515
init @ app.js:81344
createComponent @ app.js:84228
createElm @ app.js:84175
patch @ app.js:84727
Vue._update @ app.js:82168
updateComponent @ app.js:82289
get @ app.js:82703
Watcher @ app.js:82692
mountComponent @ app.js:82296
Vue.$mount @ app.js:87302
Vue.$mount @ app.js:90216
init @ app.js:81348
createComponent @ app.js:84228
createElm @ app.js:84175
patch @ app.js:84766
Vue._update @ app.js:82168
updateComponent @ app.js:82289
get @ app.js:82703
Watcher @ app.js:82692
mountComponent @ app.js:82296
Vue.$mount @ app.js:87302
Vue.$mount @ app.js:90216
Vue._init @ app.js:83236
Vue @ app.js:83303
./resources/js/app.js @ app.js:14392
__webpack_require__ @ app.js:90271
(anonymous) @ app.js:90436
__webpack_require__.O @ app.js:90308
(anonymous) @ app.js:90438
(anonymous) @ app.js:90440
Show 10 more frames
app.js:80110
Error: The `searchClient` option is required.
See documentation: https://www.algolia.com/doc/api-reference/widgets/instantsearch/js/
at new InstantSearch (app.js:40367)
at instantsearch (app.js:40157)
at VueComponent.data (app.js:77072)
at getData (app.js:82967)
at initData (app.js:82924)
at initState (app.js:82863)
at VueComponent.Vue._init (app.js:83224)
at new VueComponent (app.js:83372)
at createComponentInstanceForVnode (app.js:81515)
at init (app.js:81344)
logError @ app.js:80110
globalHandleError @ app.js:80101
handleError @ app.js:80061
getData @ app.js:82969
initData @ app.js:82924
initState @ app.js:82863
Vue._init @ app.js:83224
VueComponent @ app.js:83372
createComponentInstanceForVnode @ app.js:81515
init @ app.js:81344
createComponent @ app.js:84228
createElm @ app.js:84175
patch @ app.js:84727
Vue._update @ app.js:82168
updateComponent @ app.js:82289
get @ app.js:82703
Watcher @ app.js:82692
mountComponent @ app.js:82296
Vue.$mount @ app.js:87302
Vue.$mount @ app.js:90216
init @ app.js:81348
createComponent @ app.js:84228
createElm @ app.js:84175
patch @ app.js:84766
Vue._update @ app.js:82168
updateComponent @ app.js:82289
get @ app.js:82703
Watcher @ app.js:82692
mountComponent @ app.js:82296
Vue.$mount @ app.js:87302
Vue.$mount @ app.js:90216
Vue._init @ app.js:83236
Vue @ app.js:83303
./resources/js/app.js @ app.js:14392
__webpack_require__ @ app.js:90271
(anonymous) @ app.js:90436
__webpack_require__.O @ app.js:90308
(anonymous) @ app.js:90438
(anonymous) @ app.js:90440
Show 9 more frames
app.js:78834
[Vue warn]: Error in created hook: "TypeError: Cannot read properties of undefined (reading 'client')"
found in
---> <AisInstantSearch>
<SearchStoresComponent> at resources/js/components/searchStoresComponent.vue
<Root>
warn @ app.js:78834
logError @ app.js:80106
globalHandleError @ app.js:80101
handleError @ app.js:80061
invokeWithErrorHandling @ app.js:80084
callHook @ app.js:82443
Vue._init @ app.js:83226
VueComponent @ app.js:83372
createComponentInstanceForVnode @ app.js:81515
init @ app.js:81344
createComponent @ app.js:84228
createElm @ app.js:84175
patch @ app.js:84727
Vue._update @ app.js:82168
updateComponent @ app.js:82289
get @ app.js:82703
Watcher @ app.js:82692
mountComponent @ app.js:82296
Vue.$mount @ app.js:87302
Vue.$mount @ app.js:90216
init @ app.js:81348
createComponent @ app.js:84228
createElm @ app.js:84175
patch @ app.js:84766
Vue._update @ app.js:82168
updateComponent @ app.js:82289
get @ app.js:82703
Watcher @ app.js:82692
mountComponent @ app.js:82296
Vue.$mount @ app.js:87302
Vue.$mount @ app.js:90216
Vue._init @ app.js:83236
Vue @ app.js:83303
./resources/js/app.js @ app.js:14392
__webpack_require__ @ app.js:90271
(anonymous) @ app.js:90436
__webpack_require__.O @ app.js:90308
(anonymous) @ app.js:90438
(anonymous) @ app.js:90440
Show 9 more frames
app.js:80110
TypeError: Cannot read properties of undefined (reading 'client')
at VueComponent.created (app.js:77705)
at invokeWithErrorHandling (app.js:80076)
at callHook (app.js:82443)
at VueComponent.Vue._init (app.js:83226)
at new VueComponent (app.js:83372)
at createComponentInstanceForVnode (app.js:81515)
at init (app.js:81344)
at createComponent (app.js:84228)
at createElm (app.js:84175)
at VueComponent.patch [as __patch__] (app.js:84727)
logError @ app.js:80110
globalHandleError @ app.js:80101
handleError @ app.js:80061
invokeWithErrorHandling @ app.js:80084
callHook @ app.js:82443
Vue._init @ app.js:83226
VueComponent @ app.js:83372
createComponentInstanceForVnode @ app.js:81515
init @ app.js:81344
createComponent @ app.js:84228
createElm @ app.js:84175
patch @ app.js:84727
Vue._update @ app.js:82168
updateComponent @ app.js:82289
get @ app.js:82703
Watcher @ app.js:82692
mountComponent @ app.js:82296
Vue.$mount @ app.js:87302
Vue.$mount @ app.js:90216
init @ app.js:81348
createComponent @ app.js:84228
createElm @ app.js:84175
patch @ app.js:84766
Vue._update @ app.js:82168
updateComponent @ app.js:82289
get @ app.js:82703
Watcher @ app.js:82692
mountComponent @ app.js:82296
Vue.$mount @ app.js:87302
Vue.$mount @ app.js:90216
Vue._init @ app.js:83236
Vue @ app.js:83303
./resources/js/app.js @ app.js:14392
__webpack_require__ @ app.js:90271
(anonymous) @ app.js:90436
__webpack_require__.O @ app.js:90308
(anonymous) @ app.js:90438
(anonymous) @ app.js:90440
Show 8 more frames
app.js:78834
[Vue warn]: Error in created hook: "TypeError: Cannot read properties of undefined (reading 'mainIndex')"
found in
---> <AisConfigure>
<AisInstantSearch>
<SearchStoresComponent> at resources/js/components/searchStoresComponent.vue
<Root>
warn @ app.js:78834
logError @ app.js:80106
globalHandleError @ app.js:80101
handleError @ app.js:80061
invokeWithErrorHandling @ app.js:80084
callHook @ app.js:82443
Vue._init @ app.js:83226
VueComponent @ app.js:83372
createComponentInstanceForVnode @ app.js:81515
init @ app.js:81344
createComponent @ app.js:84228
createElm @ app.js:84175
createChildren @ app.js:84303
createElm @ app.js:84204
patch @ app.js:84727
Vue._update @ app.js:82168
updateComponent @ app.js:82289
get @ app.js:82703
Watcher @ app.js:82692
mountComponent @ app.js:82296
Vue.$mount @ app.js:87302
Vue.$mount @ app.js:90216
init @ app.js:81348
createComponent @ app.js:84228
createElm @ app.js:84175
patch @ app.js:84727
Vue._update @ app.js:82168
updateComponent @ app.js:82289
get @ app.js:82703
Watcher @ app.js:82692
mountComponent @ app.js:82296
Vue.$mount @ app.js:87302
Vue.$mount @ app.js:90216
init @ app.js:81348
createComponent @ app.js:84228
createElm @ app.js:84175
patch @ app.js:84766
Vue._update @ app.js:82168
updateComponent @ app.js:82289
get @ app.js:82703
Watcher @ app.js:82692
mountComponent @ app.js:82296
Vue.$mount @ app.js:87302
Vue.$mount @ app.js:90216
Vue._init @ app.js:83236
Vue @ app.js:83303
./resources/js/app.js @ app.js:14392
__webpack_require__ @ app.js:90271
(anonymous) @ app.js:90436
__webpack_require__.O @ app.js:90308
(anonymous) @ app.js:90438
(anonymous) @ app.js:90440
Show 22 more frames
app.js:80110
TypeError: Cannot read properties of undefined (reading 'mainIndex')
at VueComponent.<anonymous> (app.js:77666)
at VueComponent.created (app.js:77666)
at invokeWithErrorHandling (app.js:80076)
at callHook (app.js:82443)
at VueComponent.Vue._init (app.js:83226)
at new VueComponent (app.js:83372)
at createComponentInstanceForVnode (app.js:81515)
at init (app.js:81344)
at createComponent (app.js:84228)
at createElm (app.js:84175)
logError @ app.js:80110
globalHandleError @ app.js:80101
handleError @ app.js:80061
invokeWithErrorHandling @ app.js:80084
callHook @ app.js:82443
Vue._init @ app.js:83226
VueComponent @ app.js:83372
createComponentInstanceForVnode @ app.js:81515
init @ app.js:81344
createComponent @ app.js:84228
createElm @ app.js:84175
createChildren @ app.js:84303
createElm @ app.js:84204
patch @ app.js:84727
Vue._update @ app.js:82168
updateComponent @ app.js:82289
get @ app.js:82703
Watcher @ app.js:82692
mountComponent @ app.js:82296
Vue.$mount @ app.js:87302
Vue.$mount @ app.js:90216
init @ app.js:81348
createComponent @ app.js:84228
createElm @ app.js:84175
patch @ app.js:84727
Vue._update @ app.js:82168
updateComponent @ app.js:82289
get @ app.js:82703
Watcher @ app.js:82692
mountComponent @ app.js:82296
Vue.$mount @ app.js:87302
Vue.$mount @ app.js:90216
init @ app.js:81348
createComponent @ app.js:84228
createElm @ app.js:84175
patch @ app.js:84766
Vue._update @ app.js:82168
updateComponent @ app.js:82289
get @ app.js:82703
Watcher @ app.js:82692
mountComponent @ app.js:82296
Vue.$mount @ app.js:87302
Vue.$mount @ app.js:90216
Vue._init @ app.js:83236
Vue @ app.js:83303
./resources/js/app.js @ app.js:14392
__webpack_require__ @ app.js:90271
(anonymous) @ app.js:90436
__webpack_require__.O @ app.js:90308
(anonymous) @ app.js:90438
(anonymous) @ app.js:90440
Show 21 more frames
app.js:78834
[Vue warn]: Error in created hook: "TypeError: Cannot read properties of undefined (reading 'mainIndex')"
found in
---> <AisAutocomplete>
<AisInstantSearch>
<SearchStoresComponent> at resources/js/components/searchStoresComponent.vue
<Root>
warn @ app.js:78834
logError @ app.js:80106
globalHandleError @ app.js:80101
handleError @ app.js:80061
invokeWithErrorHandling @ app.js:80084
callHook @ app.js:82443
Vue._init @ app.js:83226
VueComponent @ app.js:83372
createComponentInstanceForVnode @ app.js:81515
init @ app.js:81344
createComponent @ app.js:84228
createElm @ app.js:84175
createChildren @ app.js:84303
createElm @ app.js:84204
patch @ app.js:84727
Vue._update @ app.js:82168
updateComponent @ app.js:82289
get @ app.js:82703
Watcher @ app.js:82692
mountComponent @ app.js:82296
Vue.$mount @ app.js:87302
Vue.$mount @ app.js:90216
init @ app.js:81348
createComponent @ app.js:84228
createElm @ app.js:84175
patch @ app.js:84727
Vue._update @ app.js:82168
updateComponent @ app.js:82289
get @ app.js:82703
Watcher @ app.js:82692
mountComponent @ app.js:82296
Vue.$mount @ app.js:87302
Vue.$mount @ app.js:90216
init @ app.js:81348
createComponent @ app.js:84228
createElm @ app.js:84175
patch @ app.js:84766
Vue._update @ app.js:82168
updateComponent @ app.js:82289
get @ app.js:82703
Watcher @ app.js:82692
mountComponent @ app.js:82296
Vue.$mount @ app.js:87302
Vue.$mount @ app.js:90216
Vue._init @ app.js:83236
Vue @ app.js:83303
./resources/js/app.js @ app.js:14392
__webpack_require__ @ app.js:90271
(anonymous) @ app.js:90436
__webpack_require__.O @ app.js:90308
(anonymous) @ app.js:90438
(anonymous) @ app.js:90440
Show 22 more frames
app.js:80110
TypeError: Cannot read properties of undefined (reading 'mainIndex')
at VueComponent.<anonymous> (app.js:77666)
at VueComponent.created (app.js:77666)
at invokeWithErrorHandling (app.js:80076)
at callHook (app.js:82443)
at VueComponent.Vue._init (app.js:83226)
at new VueComponent (app.js:83372)
at createComponentInstanceForVnode (app.js:81515)
at init (app.js:81344)
at createComponent (app.js:84228)
at createElm (app.js:84175)
logError @ app.js:80110
globalHandleError @ app.js:80101
handleError @ app.js:80061
invokeWithErrorHandling @ app.js:80084
callHook @ app.js:82443
Vue._init @ app.js:83226
VueComponent @ app.js:83372
createComponentInstanceForVnode @ app.js:81515
init @ app.js:81344
createComponent @ app.js:84228
createElm @ app.js:84175
createChildren @ app.js:84303
createElm @ app.js:84204
patch @ app.js:84727
Vue._update @ app.js:82168
updateComponent @ app.js:82289
get @ app.js:82703
Watcher @ app.js:82692
mountComponent @ app.js:82296
Vue.$mount @ app.js:87302
Vue.$mount @ app.js:90216
init @ app.js:81348
createComponent @ app.js:84228
createElm @ app.js:84175
patch @ app.js:84727
Vue._update @ app.js:82168
updateComponent @ app.js:82289
get @ app.js:82703
Watcher @ app.js:82692
mountComponent @ app.js:82296
Vue.$mount @ app.js:87302
Vue.$mount @ app.js:90216
init @ app.js:81348
createComponent @ app.js:84228
createElm @ app.js:84175
patch @ app.js:84766
Vue._update @ app.js:82168
updateComponent @ app.js:82289
get @ app.js:82703
Watcher @ app.js:82692
mountComponent @ app.js:82296
Vue.$mount @ app.js:87302
Vue.$mount @ app.js:90216
Vue._init @ app.js:83236
Vue @ app.js:83303
./resources/js/app.js @ app.js:14392
__webpack_require__ @ app.js:90271
(anonymous) @ app.js:90436
__webpack_require__.O @ app.js:90308
(anonymous) @ app.js:90438
(anonymous) @ app.js:90440
Show 21 more frames
app.js:78834
[Vue warn]: Error in nextTick: "TypeError: Cannot read properties of undefined (reading 'started')"
found in
---> <AisInstantSearch>
<SearchStoresComponent> at resources/js/components/searchStoresComponent.vue
<Root>
warn @ app.js:78834
logError @ app.js:80106
globalHandleError @ app.js:80101
handleError @ app.js:80061
(anonymous) @ app.js:80204
flushCallbacks @ app.js:80128
Promise.then (async)
timerFunc @ app.js:80155
nextTick @ app.js:80212
Vue.$nextTick @ app.js:81750
mounted @ app.js:77705
invokeWithErrorHandling @ app.js:80076
callHook @ app.js:82443
insert @ app.js:81369
invokeInsertHook @ app.js:84596
patch @ app.js:84815
Vue._update @ app.js:82168
updateComponent @ app.js:82289
get @ app.js:82703
Watcher @ app.js:82692
mountComponent @ app.js:82296
Vue.$mount @ app.js:87302
Vue.$mount @ app.js:90216
Vue._init @ app.js:83236
Vue @ app.js:83303
./resources/js/app.js @ app.js:14392
__webpack_require__ @ app.js:90271
(anonymous) @ app.js:90436
__webpack_require__.O @ app.js:90308
(anonymous) @ app.js:90438
(anonymous) @ app.js:90440
app.js:80110
TypeError: Cannot read properties of undefined (reading 'started')
at VueComponent.<anonymous> (app.js:77705)
at Array.<anonymous> (app.js:80202)
at flushCallbacks (app.js:80128)
logError @ app.js:80110
globalHandleError @ app.js:80101
handleError @ app.js:80061
(anonymous) @ app.js:80204
flushCallbacks @ app.js:80128
Promise.then (async)
timerFunc @ app.js:80155
nextTick @ app.js:80212
Vue.$nextTick @ app.js:81750
mounted @ app.js:77705
invokeWithErrorHandling @ app.js:80076
callHook @ app.js:82443
insert @ app.js:81369
invokeInsertHook @ app.js:84596
patch @ app.js:84815
Vue._update @ app.js:82168
updateComponent @ app.js:82289
get @ app.js:82703
Watcher @ app.js:82692
mountComponent @ app.js:82296
Vue.$mount @ app.js:87302
Vue.$mount @ app.js:90216
Vue._init @ app.js:83236
Vue @ app.js:83303
./resources/js/app.js @ app.js:14392
__webpack_require__ @ app.js:90271
(anonymous) @ app.js:90436
__webpack_require__.O @ app.js:90308
(anonymous) @ app.js:90438
(anonymous) @ app.js:90440
app.js:87315 Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools
DevTools failed to load source map: Could not load content for http://127.0.0.1:8000/js/widgets.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
<template>
<ais-instant-search
:search-client="searchClient"
index-name="instant_search_demo_query_suggestions"
>
<ais-configure :hitsPerPage="5" />
<ais-autocomplete>
<template v-slot="{ currentRefinement, indices, refine }">
<vue-autosuggest
:suggestions="indicesToSuggestions(indices)"
@selected="onSelect"
:input-props="{
style: 'width: 100%',
onInputChange: refine,
placeholder: 'Search here…',
}"
>
<template v-slot="{ suggestion }">
<ais-highlight attribute="query" :hit="suggestion.item" />
</template>
</vue-autosuggest>
</template>
</ais-autocomplete>
</ais-instant-search>
</template>
<script>
import { VueAutosuggest } from 'vue-autosuggest';
import algoliasearch from 'algoliasearch/lite';
const appId = 'latency';
const apiKey = '6be0576ff61c053d5f9a3225e2a90f76';
const searchClient = algoliasearch(appId, apiKey);
export default {
searchClient,
components: { VueAutosuggest },
methods: {
onSelect(selected) {
if (selected) {
console.log('selected');
}
},
indicesToSuggestions(indices) {
return indices.map(({ hits }) => ({
data: hits.map(hit => {
return {
name: hit.query,
};
}),
}));
},
},
};
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment