Error: The "searchParameters" option expects an object.

[mimartinez]

Description I have a problem with component AisConfigure. I get an error when I use it, the error is The "searchParameters" option expects an object..

The same error it looks like in the example for Vue3 that you have in the CodeSandbox https://codesandbox.io/p/sandbox/ms-vue3-is-forked-wsrkl8

Basic example <ais-configure :hits-per-page.camel="12" :page="0" />

Screenshots or Logs

Environment:

• Meilisearch version: 0.38.0
• instant-meilisearch version: 0.17.0
• vue-instantsearch version: 4.16.0
• Vue.js version: v3.4.24

[mimartinez]

Solved by creating a custom component AisCustomConfigure

import { createWidgetMixin, createSuitMixin } from 'vue-instantsearch/vue3/es';
import { isVue3, renderCompat } from 'vue-instantsearch/vue3/es/src/util/vue-compat/index-vue3';

export default {
  name: 'AisCustomConfigure',
  mixins: [
    createSuitMixin({ name: 'CustomConfigure' }),
    createWidgetMixin(
      { connector: connectConfigure },
      {
        $$widgetType: 'ais.customConfigure'
      }
    )
  ],
  computed: {
    widgetParams() {
      return {
        // To fix the error: The "searchParameters" option expects an object
        searchParameters: JSON.parse(JSON.stringify(this.$attrs))
      };
    }
  },
  render: renderCompat(h => {
    const slot = isVue3 ? this?.$slots?.default : this?.$scopedSlots?.default;

    if (!this?.state || !slot) {
      return null;
    }

    return h(
      'div',
      {
        class: this.suit()
      },
      [
        slot({
          refine: this.state.refine,
          searchParameters: this.state.widgetParams.searchParameters
        })
      ]
    );
  })
};

calling it so in the ais-instant-search

<ais-instant-search
        :search-client="searchClient"
        index-name="video-library:updated_at_timestamp:desc"
      >
        <ais-custom-configure :hits-per-page.camel="12" :page="0"/>
</ais-instant-search>

The problem is in this.$attrs which is not as a JSON