Vue3项目集成vue-instantsearch报instantSearchInstance未定义错误

问题原因 #

你碰到的报错核心原因是Vue InstantSearch 全局注册和局部注册混用导致的组件上下文丢失：

• 你已经在main.js里通过app.use(InstantSearch)全局注册了所有 Vue InstantSearch 组件
• 同时又在业务组件里单独引入了AisInstantSearch、AisSearchBox做局部注册
  两种注册方式的组件引用不一致，导致ais-search-box这类子组件无法拿到父级ais-instant-search提供的instantSearchInstance实例，触发你看到的报错。
  另外你模板里用到了ais-hits组件，但局部注册列表里没有引入这个组件，也会额外触发运行异常。

解决方案（二选一即可） #

方案1：保留全局注册（使用最简单） #

直接删除业务组件中局部注册相关的代码即可：

1. 删掉组件script里的引入代码：

// 删掉这行
import { AisInstantSearch, AisSearchBox } from 'vue-instantsearch/vue3/es'

2. 删掉组件components配置里的AisInstantSearch、AisSearchBox注册项
   全局注册后所有ais-开头的组件可以直接在模板里使用，不需要额外引入。

方案2：使用局部注册（减小打包体积） #

如果要按需引入减少打包体积，按以下步骤修改：

1. 删掉main.js里的app.use(InstantSearch)这行代码
2. 业务组件里引入所有用到的组件，包括AisHits：

import { AisInstantSearch, AisSearchBox, AisHits } from 'vue-instantsearch/vue3/es'

export default {
  components: {
    AisInstantSearch,
    AisSearchBox,
    AisHits
  },
  // 其余原有代码保持不变
}

修改完成后基础搜索功能即可正常运行，后续如果需要实现多索引搜索，直接嵌套ais-index组件即可匹配你的需求。

内容的提问来源于stack exchange，提问作者Eugene