AisConfigure throws error: The `searchParameters` option expects an object.

[dfreerzf]

🐛 Current behavior

Adding the AisConfigure component to my template throws an error. It was working until I updated versions.

<AisConfigure :hits-per-page.camel="20" :filters="filters" />

filters is a computed method that returns a string based on what tab is focused. I have checked and this is returning a properly formatted string.

const filters = computed(() => {
  if (state.activeTab === 'my') {
    return userFilter.value
  }
  if (state.activeTab === 'team') {
    return teamFilter.value
  }
  return adminFilter.value
})

const userFilter = computed(() => `user_id:${userStore.user.id}`)
const teamFilter = computed(() => `client_id:${userStore.client.id} AND NOT user_id:${userStore.user.id} AND NOT is_admin:1`)
const adminFilter = computed(() => 'is_admin:1')

I have removed the filters and the hits per page individually to see if either were throwing an error but the error was the same. I commented out the AisConfigure tag and it works- without the filters so I know it is something to do with this component.

I have also tried using v-bind to a simple object with static filters and I get the same error. Just adding the component with no props throws the error as well- which is what the error is intended for is my guess.

I have tried reverting versions, uninstalling/reinstalling and still remains.

The error:

connectConfigure.js:31 Uncaught (in promise) Error: The `searchParameters` option expects an object.

See documentation: https://www.algolia.com/doc/api-reference/widgets/configure/js/#connector
    at Proxy.<anonymous> (connectConfigure.js:31:13)
    at Proxy.created (widget.js:35:14)
    at callWithErrorHandling (runtime-core.esm-bundler.js:195:33)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:202:17)
    at callHook (runtime-core.esm-bundler.js:3634:3)
    at applyOptions (runtime-core.esm-bundler.js:3553:5)
    at finishComponentSetup (runtime-core.esm-bundler.js:7741:7)
    at setupStatefulComponent (runtime-core.esm-bundler.js:7664:5)
    at setupComponent (runtime-core.esm-bundler.js:7593:36)
    at mountComponent (runtime-core.esm-bundler.js:5922:7)

I went into the connectConfigure file and logged the widgetParams. It was an object and had the correct data inside, but it does not get past the isPlainObject check.

The code sandbox shows the relevant parts. Any help would be appreciated.

🔍 Steps to reproduce

Add the AisConfigure component to a vue template.

Live reproduction

Not working but shows my imports and template.

https://codesandbox.io/p/devbox/async-leftpad-jrc38f?file=%2Fpages%2Findex.vue

💭 Expected behavior

It should work with the props being passed into.

Package version

"vue-instantsearch": "^4.16.0", "algoliasearch": "^4.23.3", "nuxt": "^3.10.0",

Operating system

macOS 14.4.1

Browser

Chrome 124.0.6367.78

Code of Conduct

• I agree to follow this project's Code of Conduct

[Thomas Kjærgaard]

#6164

[DN]

Hello, when will this be published to npm. The search on our site is completely unusable due to this error.

[Dhaya]

Hi, we just released vue-instantsearch@4.16.1 which includes a fix for this issue.