Hydration fails when AisComponents are wrapped in regular vue components (SSR)

When working with SSR using the AisInstantSearchSsr components, it appears that you can’t wrap AisChildComponents within regular Vue Wrapping components. It causes a hydration failure.

App.vue

<ais-instant-search-ssr>

   <TestFilter /> <-- Doesnt work
  <ais-refinement-list attribute="brand" /> <-- Works

  <ais-hits class="o-product-catalog__list o-product-grid">
    <template slot-scope="{ items }">
      <CatalogProduct v-for="item in items" :key="item.objectID" :product="item" />
    </template>
  </ais-hits>
</div>

TestFiler.vue
<template
<ais-refinement-list attribute=“brand”
</template

import { AisRefinementList } from 'vue-instantsearch'
export default {
  components: {
    AisRefinementList
  }
}

The code is the same, its just a wrapper.

This sounds like it’s possibly a timing issue. Could you open an issue on Vue InstantSearch with reproduction of this behaviour? What exactly happens when the component is wrapped, its refinement isn’t taken in account or an error?

For the time being, you can indeed not wrap the components, which I’m sure you already saw.

thanks!

Hi Haroen,

It gives a default vue hydration warning on loading a SSR page. The element in question is the root element of the specific component. (ais-refinementlist, pagination etc).

Hi Haroen,

I am having trouble reproducing the error as I can’t find a suitable Nuxt container. Do you have an Nuxt SSR / VueInstant search sandbox?