Vue <AisInstantSearch /> fails to start with Vue 3 and @vue/compat

[Craig Anderson]

🐛 Current behavior

There is a compatibility issue when using the Vue3 version of the Algolia InstantSearch library alongside the @vue/compat module during a migration from Vue 2 to 3. When attempting to run the application with the InstantSearch library in a Vue 3 environment that utilises the @vue/compat module for backward compatibility, the application fails to initialise properly.

[Vue warn]: Unhandled error during execution of render function 
  at <AisInstantSearch search-client=index-name="instant_search" > 

🔍 Steps to reproduce

1. Install @vue/compat in a Vue 3 project
2. (if not already done) Update to the Vue 3 version of the library in the project

• import InstantSearch from 'vue-instantsearch/vue3/es';

3. Run the app

Using the Live reproduction below, you can toggle between working / not working by adding and removing the alias in Vite config.

Working

  resolve: {
    alias: {
      // vue: '@vue/compat',
    },
  },

Not working

  resolve: {
    alias: {
      vue: '@vue/compat',
    },
  },

Live reproduction

https://codesandbox.io/p/devbox/black-glade-jrhmvc

💭 Expected behavior

When integrating the Vue3 version of the Algolia InstantSearch library in a Vue 3 project that utilises the @vue/compat module, the expected behaviour is a seamless integration with full functionality of the components. The application should initialise without errors, and the InstantSearch components should function as intended, providing a smooth transition from Vue 2 to Vue 3

Package version

vue-instantsearch 4.4.2

Operating system

No response

Browser

No response

Code of Conduct

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