Cannot read property 'instantSearchInstance' of undefined

[superdiazzz]

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

I copied script like below:

<template>
<div class="app-container">
<div>
    <header class="header">
      <h1 class="header-title">
        <a href="/"> vue-instantsearch-app </a>
      </h1>
      <p class="header-subtitle">
        using
        <a href="https://github.com/algolia/vue-instantsearch">
          Vue InstantSearch
        </a>
      </p>
    </header>

    <div class="container">
      <ais-instant-search
        :search-client="searchClient"
        index-name="instant_search"
      >
        <div class="search-panel">
          <div class="search-panel__filters">
            <ais-refinement-list attribute="brand" />
          </div>

          <div class="search-panel__results">
            <div class="searchbox">
              <ais-search-box placeholder="" />
            </div>
            <ais-hits>
              <template v-slot:item="{ item }">
                <article>
                  <h1>
                    <ais-highlight :hit="item" attribute="name" />
                  </h1>
                  <p>
                    <ais-highlight :hit="item" attribute="description" />
                  </p>
                </article>
              </template>
            </ais-hits>

            <div class="pagination">
              <ais-pagination />
            </div>
          </div>
        </div>
      </ais-instant-search>
    </div>
  </div>
</div>
</template>

<script>
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 {
          
        }
    }

}
</script>

<style scoped>

.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;
}

</style>

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')        
    }
})

[Haroenv]

Could you make this in a sandbox please? I can't debug code without seeing the full setup.
Note that this repository is not a support forum, for that we have discourse.algolia.com / support@algolia.com

[superdiazzz]

@Haroenv this is weird, i tried copy my snippet code into codesandbox and it running well (without other setup in main.js, like firebase onAuthStateChanged). The only difference is i made component named "AlgoSearch.vue" then call it inside a views. It error with that reason. I Also tried to copy that code into App.vue directly then it also returning same error
I don't understand :(

[Haroenv]

Sorry, but unfortunately a screenshot can't be debugged. Is the component actually put inside an ais-instant-search?

[superdiazzz]

Sorry, but unfortunately a screenshot can't be debugged. Is the component actually put inside an ais-instant-search?

Sorry, I tried some different ways, like below:
AlgoSearch.vue

<template>
  <div class="app-container">
<div>
    <header class="header">
      <h1 class="header-title">
        <a href="/"> vue-instantsearch-app </a>
      </h1>
      <p class="header-subtitle">
        using
        <a href="https://github.com/algolia/vue-instantsearch">
          Vue InstantSearch
        </a>
      </p>
    </header>

    <div class="container">
      <ais-instant-search
        :search-client="searchClient"
        index-name="instant_search"
      >
        <div class="search-panel">
          <div class="search-panel__filters">
            <ais-refinement-list attribute="brand" />
          </div>

          <div class="search-panel__results">
            <div class="searchbox">
              <ais-search-box placeholder="" />
            </div>
            <ais-hits>
              <template v-slot:item="{ item }">
                <article>
                  <h1>
                    <ais-highlight :hit="item" attribute="name" />
                  </h1>
                  <p>
                    <ais-highlight :hit="item" attribute="description" />
                  </p>
                </article>
              </template>
            </ais-hits>

            <div class="pagination">
              <ais-pagination />
            </div>
          </div>
        </div>
      </ais-instant-search>
    </div>
  </div>
</div>
</template>

<script>
import algoliasearch from 'algoliasearch/lite'
import { ref } from 'vue';

export default {
  components: {
  },
  async setup(){
    
    const searchClient = ref(null)

    const res = await algoliasearch(
          "latency",
          "6be0576ff61c053d5f9a3225e2a90f76")

    searchClient.value = res
    

   return {
     searchClient
   }
  }
};
</script>

<style scoped>
.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;
}
</style>

and my views

<template>
<h1>Ini laman Sample</h1>
<Suspense>
    <template #default>
        <AlgoSearch />
    </template>
    <template #fallback>
        <div>Loading...</div>
    </template>

</Suspense>

</template>

<script>
import ParticleCustom from '../components/ParticleCustom.vue'
import Search from '../components/Search.vue'
import AlgoSearch from '../components/searchbar/AlgoSearch.vue'
import '@dafcoe/vue-collapsible-panel/dist/vue-collapsible-panel.css'
import { onMounted,ref } from '@vue/runtime-core'
import algoliasearch from 'algoliasearch/lite'


export default {

    components: {
        ParticleCustom, Search, AlgoSearch
    },
    setup(){

        // some code
    }

}
</script>

<style scoped>

</style>

[Haroenv]

again, please create this in a sandbox, sorry

[superdiazzz]

again, please create this in a sandbox, sorry

i works in sandbox, but didn't work in my project. thats why i said weird. However the code are same.
this is in sandbox https://codesandbox.io/s/crazy-worker-kkq1c

Updated:
Btw, if you try to deploy that code into public ex: https://csb-kkq1c.netlify.app/ the error appears!

[Haroenv]

🤔 that sandbox indeed totally works for me, and the version which is built will have the error. I'm assuming this might be related to minification changing that name which is tried to be requested?

[Haroenv]

Looking more, it really must be related to the minification somehow reusing variables:

code in sandbox:

t === this; // true

Code in deployed version:

e === this; // false

[superdiazzz]

Sorry, am really noob. What should i do to solve this?

[Haroenv]

Sorry, I have no idea what could be causing this @superdiazzz, the only thing I notice is that the variable name is different (shadowing something else) in the prod version, but I wouldn't know how to avoid that.

The only thing I could think of to try for you is to take all Vue InstantSearch code and make it part of your source code, maybe minification will happen differently?

I've opened a topic on the Vue forum for this: https://forum.vuejs.org/t/vue-3-production-mode-makes-this-undefined/121265, but I recommend you ask for more help in other places as well, as this isn't really related to InstantSearch, but to Vue and this

[superdiazzz]

Thank you for scaling up this issue. I hope there will be good news.