Vue-instantsearch: Vue3 is not supported

[powellblyth]

Bug 🐞

What is the current behavior?

The instantsearch Component for Vue does not work when I upgrade my website to Vue3, which is the current version of Vue

What is the expected behavior?

Vue Instantsearch should work with the latest version of Vue

Does this happen only in specific situations?

No. This will not work with any vue3 installation

What is the proposed solution?

Rewrite or branch the code to provide Vue3 support

What is the version you are using?

Latest

Always try the latest one before opening an issue.

[Haroenv]

I have made a couple of POCs on Vue 3, if you apply all the patches from https://github.com/algolia/vue-instantsearch/milestone/2 it will work on Vue 3, but only if you import the components directly (not from vue-instantsearch, but vue-instantsearch/src/components).

At the moment you're the first person which actually requested this, which is why we haven't yet seriously migrated. I want to make sure our library works with both versions of vue, but the migration guides on the vue site assume you only need to support vue 3, which I don't think will be the case for many people grandfathered on vue 2

[powellblyth]

Thank you. I'm asking the team to have a look.

[mits87]

Actually I have the same problem. Will be good if you will have a support for VUE3

[Haroenv]

Does someone have an example of a different library which supports both Vue 2 & Vue 3? I haven't come across any yet (that have rendering).

Have you tried the POC @mits87 ?

[mits87]

@Haroenv most of the libraries doing a @next version for vue3.
And this topic will appear again and again because right now people are switching to vue3.

About POC - can you create a separate branch (eg. next) where all patches will be applied?
I think it will be easier to use and test it for everyone

[SteveLewisES]

Hi @Haroenv, thank you for your feedback. I have forked this repo and applied all the POC changes mentioned, with all tests passing.

However once I use this repo in my project, and switch to importing the components directly, I get the following error:

Uncaught (in promise) TypeError: Cannot read property 'instantSearchInstance' of undefined

From the following snippet of code:

getParentIndex: { from: '$_ais_getParentIndex', default() { return () => this.instantSearchInstance.mainIndex; }, },

[Haroenv]

I didn't get that error when last trying @SteveLewisES, where can I try your version to debug?

[SteveLewisES]

I didn't get that error when last trying @SteveLewisES, where can I try your version to debug?

https://github.com/SteveLewisES/vue-instantsearch :)

[mathiasvalentin]

We will soon need support for Vue 3.
I think the next version approach @mits87 mentioned is the way to go 👊

[Haroenv]

It's a fair option, but that assumes that everyone will update to Vue 3 soon, otherwise we need to maintain Vue InstantSearch for version 3 and version 2, and won't be able to make any breaking changes in a v2 support. The other projects that I've seen to bet on Vue 3 already seem to be mostly stable (routing etc.)

[mathiasvalentin]

@Haroenv good point. Everyone will properly not update to Vue 3 before all the major libraries have a version that supports Vue 3 available.
I see that Vuetify has a target release in Q3 2020. So we might be stuck in this limbo for some time 😅

[anton-rob]

Any update/ETA on this? The core ecosystem for Vue3 is now out of beta and instantserach is currently for my project the only dependency that's not available.

As @mathiasvalentin and @Haroenv mention, I think many projects will be on Vue 2 for a long time forward while others are already starting to upgrade. A solution for both camps would be ideal.

[SteelWagstaff]

We are also interested in using Vue3 with a project we're currently building. Like some others here, Algolia Instant Search is the only dependency which does not support it. Would be great to have some solution available for teams in our situation.

[eunjae-lee]

As we will see more demand for vue 3 support, we're prioritizing the task. I cannot tell the ETA but we're already working on it a bit and more will come.

[donPuerto]

Oh no Vue 3 has no support yet?

[ChristianPavilonis]

Any word?

[Haroenv]

As said, we are working on this, but it's definitely not straightforward. I still have not found a different package that supports vue 2 and vue 3, so this would be the first one (since having two separate branches is much more work for maintenance)

[haoyun]

As said, we are working on this, but it's definitely not straightforward. I still have not found a different package that supports vue 2 and vue 3, so this would be the first one (since having two separate branches is much more work for maintenance)

https://github.com/vueuse/vue-demi ?

[Kocal]

Already proposed in https://github.com/algolia/vue-instantsearch/pull/847#issuecomment-816738362, but working on a library to be compatible both with Vue 2 and 3 is definitly not so easy, and vue-demi won't help so much here.

[gqoew]

Happy to see vue3 support has been prioritized, it is much needed !

[lukamo1996]

Please add vue 3 support 😫

[Haroenv]

We are working on it @lukamo1996! If you want to help out, you can try the feat/vue3-compat branch (https://github.com/algolia/vue-instantsearch/pull/990)

[lukamo1996]

We are working on it @lukamo1996! If you want to help out, you can try the feat/vue3-compat branch (#990)

Can't wait <3 I'm a noob, I would just cause a mess

[mrzdevcore]

Hello, yes, waiting for vue3 support.

[eunjae-lee]

Hello everyone here,
As shared before, we're working on Vue 3 support at the moment. You can see the progress in this PR (branch feat/vue3-compat), also this and that.

And I'd appreciate if you show your enthusiasm as reaction to this issue, instead of a comment because new comments send notifications to everyone watching this issue. Let's minimize unnecessary notifications for everyone.

I'm also excited with this topic. We'll keep you updated. Feel free to ask questions or suggest anything related to Vue 3 support here.

[michtio]

Hey Hey Algolia team, not another whine about hey when is the Vue3 support here! But rather a question if you could tag the vue-compat branch as beta, or make it more easily installable through npm to test in deploys. Thanks!

[eunjae-lee]

Hey @michtio that's actually a good idea.

So far, we've been keeping all the PRs under this milestone.

And this is an umbrella PR where all the Vue 3 support related PRs get merged into.

If you go to the PR, I've added some description on how to try the temporary version on your project. Let us know how it goes. I appreciate all of your interest and tests!

[michtio]

@eunjae-lee going to start in the coming weeks on an Algolia integration where Vue3 ( no SSR ) is min. requirement. Will sure keep short tabs on it, and will file any issues along the way :)

[eunjae-lee]

@michtio Thanks for the test. Looking forward to hearing from you!

[michtio]

@eunjae-lee doesn't seem that I can import components through tree-shaking:

<script lang="ts">
    import { defineAsyncComponent, defineComponent } from 'vue'
    import { AisInstantSearch, AisSearchBox } from 'vue-instantsearch/dist/vue3/es'
    import { mapGetters } from 'vuex'

    export default defineComponent({

        components: {
            AisInstantSearch,
            AisSearchBox,
            /** ATOMS */
        },

    })
</script>

Results in:

Failed to compile.

export 'default' (imported as 'Vue') was not found in 'vue' (possible exports: BaseTransition, Comment, Fragment, KeepAlive, Static, Suspense, Teleport, Text, Transition, TransitionGroup, callWithAsyncErrorHandling, callWithErrorHandling, camelize, capitalize, cloneVNode, compatUtils, compile, computed, createApp, createBlock, createCommentVNode, createHydrationRenderer, createRenderer, createSSRApp, createSlots, createStaticVNode, createTextVNode, createVNode, customRef, defineAsyncComponent, defineComponent, defineEmit, defineEmits, defineExpose, defineProps, devtools, getCurrentInstance, getTransitionRawChildren, h, handleError, hydrate, initCustomFormatter, inject, isProxy, isReactive, isReadonly, isRef, isRuntimeOnly, isVNode, markRaw, mergeDefaults, mergeProps, nextTick, onActivated, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onDeactivated, onErrorCaptured, onMounted, onRenderTracked, onRenderTriggered, onServerPrefetch, onUnmounted, onUpdated, openBlock, popScopeId, provide, proxyRefs, pushScopeId, queuePostFlushCb, reactive, readonly, ref, registerRuntimeCompiler, render, renderList, renderSlot, resolveComponent, resolveDirective, resolveDynamicComponent, resolveFilter, resolveTransitionHooks, setBlockTracking, setDevtoolsHook, setTransitionHooks, shallowReactive, shallowReadonly, shallowRef, ssrContextKey, ssrUtils, toDisplayString, toHandlerKey, toHandlers, toRaw, toRef, toRefs, transformVNodeArgs, triggerRef, unref, useAttrs, useContext, useCssModule, useCssVars, useSSRContext, useSlots, useTransitionState, vModelCheckbox, vModelDynamic, vModelRadio, vModelSelect, vModelText, vShow, version, warn, watch, watchEffect, withAsyncContext, withCtx, withDefaults, withDirectives, withKeys, withModifiers, withScopeId)

Is there anything else to take into consideration?

This error even comes from the vue-demi library:

webpack_1     | WARNING in ./node_modules/vue-demi/lib/index.esm.js 5:11-14
webpack_1     | export 'default' (imported as 'Vue') was not found in 'vue' (possible exports: BaseTransition, Comment, Fragment, KeepAlive, Static, Suspense, Teleport, Text, Transition, TransitionGroup, callWithAsyncErrorHandling, callWithErrorHandling, camelize, capitalize, cloneVNode, compatUtils, compile, computed, createApp, createBlock, createCommentVNode, createHydrationRenderer, createRenderer, createSSRApp, createSlots, createStaticVNode, createTextVNode, createVNode, customRef, defineAsyncComponent, defineComponent, defineEmit, defineEmits, defineExpose, defineProps, devtools, getCurrentInstance, getTransitionRawChildren, h, handleError, hydrate, initCustomFormatter, inject, isProxy, isReactive, isReadonly, isRef, isRuntimeOnly, isVNode, markRaw, mergeDefaults, mergeProps, nextTick, onActivated, onBeforeMount, onBeforeUnmount, onBeforeUpdate, onDeactivated, onErrorCaptured, onMounted, onRenderTracked, onRenderTriggered, onServerPrefetch, onUnmounted, onUpdated, openBlock, popScopeId, provide, proxyRefs, pushScopeId, queuePostFlushCb, reactive, readonly, ref, registerRuntimeCompiler, render, renderList, renderSlot, resolveComponent, resolveDirective, resolveDynamicComponent, resolveFilter, resolveTransitionHooks, setBlockTracking, setDevtoolsHook, setTransitionHooks, shallowReactive, shallowReadonly, shallowRef, ssrContextKey, ssrUtils, toDisplayString, toHandlerKey, toHandlers, toRaw, toRef, toRefs, transformVNodeArgs, triggerRef, unref, useAttrs, useContext, useCssModule, useCssVars, useSSRContext, useSlots, useTransitionState, vModelCheckbox, vModelDynamic, vModelRadio, vModelSelect, vModelText, vShow, version, warn, watch, watchEffect, withAsyncContext, withCtx, withDefaults, withDirectives, withKeys, withModifiers, withScopeId)

[michtio]

As said, we are working on this, but it's definitely not straightforward. I still have not found a different package that supports vue 2 and vue 3, so this would be the first one (since having two separate branches is much more work for maintenance)

In my honest opinion, I think it's not bad to have a seperate branch/feature release ( e.g. v2 vs v3 branch ) or release a vue-instantsearch 4.0.0 which is a major release which supports vue3, it is breaking and will be flagged. for Vue2 just support bugfixes and security issues, for future development and new features go the Vue3 route, you can still release on the v3 branches.

All major packages do it this way, dev-server also stops supporting webpack4 and goes webpack5, we kind of have to live with the fact that software is moving rapidly, the current package is very stable for vue2, but could move forward towards vue3 now.

I wouldn't mind helping contributing in this, maintaining and/or consulting if needed.

with my current tests, I don't think vue-demi suffices for having support here, since it is throwing errors at us in a webpack5 modern buildchain which uses typescript.

[eunjae-lee]

Hello @michtio
Thanks for reporting the issue. I'm not sure where the problem comes from. Can you share a reproduction?

2efv5.zip

By the way this is a working example that I have.

In my honest opinion, I think it's not bad to have a seperate branch/feature release.

I'd love to, but the thing is considering the adaption we still need to support vue 2. Not just security fixes, but whenever we develop new widget or new feature, we need to do it for both versions, which will make the maintenance hard.

And we forked vue-demi and modified it to fit our needs. My hunch is telling postinstall from vue-demi didn't work for your case. Could you check ./node_modules/vue-demi/lib/index.esm.js and see its first several lines?

It should start with

import * as Vue from 'vue'

var isVue2 = false
var isVue3 = true
var Vue2 = undefined

I think in your case it's (wrongly) this:

import Vue from 'vue'

var isVue2 = true
var isVue3 = false
var Vue2 = Vue
var version = Vue.version

If that's the case, if you run yarn vue-demi-switch 3 will solve your issue temporarily but I need to figure out why it happens. Could you check and confirm please?

[eunjae-lee]

Thanks to @Haroenv I think we have a good way to remove vue-demi and still make it work. I'll work on it probably today or tomorrow. When it's done, it will be merged to this umbrella PR. Watch the PR if interested :)

[michtio]

Hello @michtio
Thanks for reporting the issue. I'm not sure where the problem comes from. Can you share a reproduction?

2efv5.zip

By the way this is a working example that I have.

In my honest opinion, I think it's not bad to have a seperate branch/feature release.

I'd love to, but the thing is considering the adaption we still need to support vue 2. Not just security fixes, but whenever we develop new widget or new feature, we need to do it for both versions, which will make the maintenance hard.

And we forked vue-demi and modified it to fit our needs. My hunch is telling postinstall from vue-demi didn't work for your case. Could you check ./node_modules/vue-demi/lib/index.esm.js and see its first several lines?

It should start with

import * as Vue from 'vue'

var isVue2 = false
var isVue3 = true
var Vue2 = undefined

I think in your case it's (wrongly) this:

import Vue from 'vue'

var isVue2 = true
var isVue3 = false
var Vue2 = Vue
var version = Vue.version

If that's the case, if you run yarn vue-demi-switch 3 will solve your issue temporarily but I need to figure out why it happens. Could you check and confirm please?

I can confirm I had the wrong version :+1: Looking forward to the other adaptation.

Currently went with the route of creating our own vue components based on the bare JS packages, which will be a better fit at this stage for us.

On the other hand, it is okay if you don't develop new features/widgets for older software anymore, if people want to use legacy software / packages, it's their responsibility to update it on projects, kind of how the ecosystem works. It shouldn't hold you guys back from using better/more modern technology.

You might miss out a lot on performance with all the new Vue3 features.

[eunjae-lee]

Hello @michtio, we've just merged the fix in the branch. So you can try it again.

Currently went with the route of creating our own vue components based on the bare JS packages, which will be a better fit at this stage for us.

Can you explain a bit more about this? Was it because of the issue with vue-demi? or another reason?

You might miss out a lot on performance with all the new Vue3 features.

I'm not sure where you get it. The Vue 3 version of Vue InstantSearch will use Vue 3 APIs, so theoretically it shouldn't be a problem.

[michtio]

@eunjae-lee , because of the hybrid vue2/vue3 approach mainly, it does clutter up the entire build process, with code we prefer not to have in there for government projects. Because it is yet another package.

Also missing out on performance you can't implement Vue3 performance fully, since it's not able to use the composition API out of the box plus you couldn't use defineAsyncComponent and defineComponent for lazy loading purposes and more, which vue2 has, but relies on webpack to handle those things.

[Haroenv]

@michtio, those items aren't relevant for Vue InstantSearch, as it doesn't define components directly, that's done by the user's code, and the composition API is still possible to use via @vue/composition-api for v2, we just haven't had the need, as there's very little state handling part of Vue InstantSearch itself.

Of course rewriting is an option, but this doubles or long-term support load, and is not a compromise we will be making.

Good luck with your version of Vue InstantSearch of course, there's many possible implementations, and if you have very specific needs, it totally makes sense to take the bare minimum of code!