Async component <Highlight> should be explicitly created via defineAsyncComponent() in Vue 3

[josefarrugia]

🐛 Current behavior

Hello there,

I am getting the following Vue warning error message when using the AisHighlight component in Vue 3.4.21 whilst entering characters in my search field. There are no results being shown too. This works on Vue 2.7.16.

[Vue warn]: (deprecation COMPONENT_ASYNC) Async component <Highlight> should be explicitly created via `defineAsyncComponent()` in Vue 3. Plain functions will be treated as functional components in non-compat build. If you have already migrated all async component usage and intend to use plain functions for functional components, you can disable the compat behavior and suppress this warning with:

configureCompat({ COMPONENT_ASYNC: false })

Details: https://v3-migration.vuejs.org/breaking-changes/async-components.html 

Here's a snippet of my import statements:

import {
  AisAutocomplete,
  AisConfigure,
  AisHighlight,
  AisInstantSearch,
} from 'vue-instantsearch/vue3/es';

I am also getting the following warning message:

Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://github.com/vuejs/core . 
  at <AisAutocomplete> 
  at <AisInstantSearch

Any thoughts?

🔍 Steps to reproduce

1. Create Vue 3.4.21 app
2. Install npm install algoliasearch vue-instantsearch
3. Setup algolia
4. Import the following components AisAutocomplete, AisConfigure, AisHighlight, AisInstantSearch, to your Vue template
5. Initiate a search
6. Take note of the Vue warning message in the console: Vue warn]: (deprecation COMPONENT_ASYNC) Async component <Highlight> should be explicitly created via defineAsyncComponent() in Vue 3

Live reproduction

no link at the moment

💭 Expected behavior

Hits should be displayed whilst typing in a few characters.

Package version

vue-instantsearch@4.15.0, algoliasearch@4.4.0

Operating system

No response

Browser

No response

Code of Conduct

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

[Haroenv]

Hm, this may be a breaking change in Vue. I know it definitely works in older vue versions, like 3.2.4 here https://github.com/algolia/doc-code-samples/blob/master/vue-instantsearch/vue3-vite/yarn.lock#L642 (or 3.2.47 elsewhere). From which vue version are you able to reproduce this?

[josefarrugia]

@Haroenv Vue@3.4.21

[Haroenv]

Yes, I read the original text, but with older vue versions it definitely works. Does 3.4.0 for example have that error already?

[josefarrugia]

@Haroenv apologies I misread your original message. So I have dropped down the following packages, vue@3.2.26, @vue/compat@3.2.26 and @vue/compiler-sfc@3.2.26, and it's still producing the same warning message:

[Vue warn]: (deprecation RENDER_FUNCTION) Vue 3's render function API has changed. You can opt-in to the new API with:

configureCompat({ RENDER_FUNCTION: false })

[Rigo-m]

@josefarrugia happy to look into it, but require a minimal reproduction. Can you provide it?

[josefarrugia]

@Rigo-m sure, what particular files would you like to see and how do I go about sharing it with you?

[Rigo-m]

Can you provide a public repository with a minimal setup that reproduces the behavior?