Nuxt SSR configuration not working after following doccs

I’ve tried configuring Vue Instantsearch with Nuxt following the docs. Unfortunately, I am getting an Cannot read property of $vnode of undefined error with no stack trace.

The error only occurs on a refresh, not when navigated to the path that displays the component below.

<script>
import { AisInstantSearchSsr, AisHits, createServerRootMixin } from 'vue-instantsearch'

import AlgoliaSearch from 'algoliasearch'

const searchClient = AlgoliaSearch('XX', 'XX')

export default {
  components: {
    AisInstantSearchSsr,
    AisHits
  },
  mixins: [
    createServerRootMixin({
      searchClient,
      indexName: 'IndexName'
    }),
    'rootMixin'
  ],
  serverPrefetch() {
    return this.instantsearch.findResultsState().then((algoliaState) => {
      this.$ssrContext.nuxt.algoliaState = algoliaState
    })
  },
  data() {
    return {
      searchClient
    }
  },
  beforeMount() {
    const results = this.$nuxt.context.nuxtState.algoliaState || window.__NUXT__.algoliaState

    this.instantsearch.hydrate(results)
  }
}
</script>

That’s a great catch, the code is supposed to be findResultsState(this), I’ll edit this in the documentation!

Heya, thanks for the reply. I changed it to below and I am now getting the s.getWidgetState is not a function error on all my RefinementLists.

Am I maybe importing the wrong lib as I am not importing everything (see previous code snippet). The Nuxt config is properly set according to the docs. If I remove the RefinementFilters everything works. I’ve also added one custom refinement list below.

EDIT: It appears to happen in the createURL(item) call. The error does not occur when I remove it.

Catalog.vue:

export default {
 ....
  serverPrefetch() {
    return this.instantsearch.findResultsState(this).then((algoliaState) => {
      this.$ssrContext.nuxt.algoliaState = algoliaState
    })
  }
}

BrandFilter.vue:

<template>
  <div class="c-catalog-filters__group" :class="{ 'is-open': isOpen }">
    <button class="c-catalog-filters__group-name f-12 f-space-grey" @click="toggle()">
      <span>Brand</span>
      <span class="c-catalog-filters__cross" :class="{ 'is-open': isOpen }"></span>
    </button>
    <ais-refinement-list attribute="brand" :searchable="true">
      <div slot-scope="{ items, isFromSearch, refine, createURL, searchForItems }" class="c-catalog-filters__filter">
        <input class="c-catalog-filters__filter-search-input" @input="searchForItems($event.currentTarget.value)" />
        <ul class="c-catalog-filters__filter-options c-catalog-filters__filter-checkboxes">
          <li v-if="isFromSearch && !items.length">No results.</li>
          <li v-for="item in items" :key="item.value" class="c-catalog-filters__checkbox">
            <a
              :href="createURL(item)"
              :style="{ fontWeight: item.isRefined ? 'bold' : '' }"
              @click.prevent="refine(item.value)"
            >
              <ais-highlight attribute="item" :hit="item" />
              ({{ item.count.toLocaleString() }})
            </a>
          </li>
        </ul>
      </div>
    </ais-refinement-list>
  </div>
</template>

<script>
import { AisRefinementList, AisHighlight } from 'vue-instantsearch'
import toggleOpenCloseMixin from '~/mixins/toggleOpenClose.js'

export default {
  components: {
    AisRefinementList,
    AisHighlight
  },
  mixins: [toggleOpenCloseMixin]
}
</script>

The implementation doesn’t look wrong to me, could you make a sandbox so I can investigate? We have a starter template here: https://codesandbox.io/s/blissful-northcutt-c4y4v?file=/pages/search.vue

Just made small edit to my previous post: It appears to happen in the createURL(item) call. The error does not occur when I remove it.

Interestingly enough, just copying the RefinementList with scoped slots in your sandbox template seems to work.

Sandbox: https://7t8dq.sse.codesandbox.io/search

1 Like

What value have you provided for routing in the createServerMixin? This indeed doesn’t pose issues for me

note that it’s createURL(item.value) though, not item

I am not providing any values to the createServerMixin other than:

    export default {
      ...
      mixins: [
        createServerRootMixin({
          searchClient,
          indexName: 'Spree_Product'
        }),
        'rootMixin'
      ]
}

Changed it to item.value btw.

If you are not using routing the URL returned by createURL will always be #, FYI :slight_smile: . It’s odd that this happens still though, since I had exactly the same as you just a few minutes ago. If you could reproduce the error anywhere, I’d love to find what causes it thgou

It’s happening on all our RefinementLists once I start working with the slots and call createURL. The intention was to use routing, just disabled it when I was trying to solve this.

I will try to get routing working and see if anything changes. However, I am not too familiar with the internals so I am not sure how I can provide more information. I could give you access to the box if you want?

I think the best way to go would be to recreate this issue in an isolated way, either in a sandbox, or a GitHub project.

I know that the error you’re talking about must be somewhere here:

But I can not make that error :thinking:

I was not able to isolate the problem on a sandbox. I decided to rebuild all node packages. This broke my setup, which I was strangely not able to fix. I loaded a backup and merged frontend code changes and the error is gone :roll_eyes:.

Thanks for your help. Guess the issue is resolved with the comments above.