Vue not found in 'vue' Laravel 8.12 with Laravel Jetstream 2.2 and Inertia vue3 0.35

[GamerFac3]

Hey, I am using meilisearch in my laravel jetstream project and installed meilisearch instantsearch as documented. I saw that your documentation is another syntax than possible in Vue3, mine looks like that:

require('./bootstrap');

// Import modules...
import { createApp, h } from 'vue';
import { App as InertiaApp, plugin as InertiaPlugin } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';
import InstantSearch from "vue-instantsearch/src/components/InstantSearch";

const el = document.getElementById('app');

createApp({
    render: () =>
        h(InertiaApp, {
            initialPage: JSON.parse(el.dataset.page),
            resolveComponent: (name) => require(`./Pages/${name}`).default,
        }),
})
    .mixin({ methods: { route } })
    .use(InstantSearch)
    .use(InertiaPlugin)
    .mount(el);

InertiaProgress.init({ color: '#4B5563' });

Thats the default for Jetstream Projects using Inertia. Now I get

WARNING in ./node_modules/vue-instantsearch/src/util/createInstantSearchComponent.js 41:47-58
export 'default' (imported as 'Vue') was not found in 'vue' (possible exports: BaseTransition, Comment, Fragment, KeepAlive, Static, Suspense, Teleport, Te
xt, Transition, TransitionGroup, callWithAsyncErrorHandling, callWithErrorHandling, camelize, capitalize, cloneVNode, compile, computed, createApp, createB
lock, createCommentVNode, createHydrationRenderer, createRenderer, createSSRApp, createSlots, createStaticVNode, createTextVNode, createVNode, customRef, d
efineAsyncComponent, defineComponent, defineEmit, defineProps, devtools, getCurrentInstance, getTransitionRawChildren, h, handleError, hydrate, initCustomF
ormatter, inject, isProxy, isReactive, isReadonly, isRef, isVNode, markRaw, mergeProps, nextTick, onActivated, onBeforeMount, onBeforeUnmount, onBeforeUpda
te, onDeactivated, onErrorCaptured, onMounted, onRenderTracked, onRenderTriggered, onUnmounted, onUpdated, openBlock, popScopeId, provide, proxyRefs, pushS
copeId, queuePostFlushCb, reactive, readonly, ref, registerRuntimeCompiler, render, renderList, renderSlot, resolveComponent, resolveDirective, resolveDyna
micComponent, resolveTransitionHooks, setBlockTracking, setDevtoolsHook, setTransitionHooks, shallowReactive, shallowReadonly, shallowRef, ssrContextKey, s
srUtils, toDisplayString, toHandlerKey, toHandlers, toRaw, toRef, toRefs, transformVNodeArgs, triggerRef, unref, useContext, useCssModule, useCssVars, useS
SRContext, useTransitionState, vModelCheckbox, vModelDynamic, vModelRadio, vModelSelect, vModelText, vShow, version, warn, watch, watchEffect, withCtx, wit
hDirectives, withKeys, withModifiers, withScopeId)

WARNING in ./node_modules/vue-instantsearch/src/util/createInstantSearchComponent.js 42:61-68
Should not import the named export 'version' (imported as 'version') from default-exporting module (only default export is available soon)

It still compiles and works, but maybe someone wants to look into that.

[GamerFac3]

Just saw that it's probably related to vue-instantsearch of course... Just close if that's the case.

[bidoubiwa]

Hey @GamerFac3, thanks a lot for pointing out this issue. I will give it a look as soon as possible.

[bidoubiwa]

Hey! Thanks a lot @w3bdesign for the clarification. meilisearch-vue uses vue-instantsearch which is not compatible with vue3 at the moment: https://github.com/algolia/vue-instantsearch/issues/890

import InstantSearch from "vue-instantsearch/src/components/InstantSearch";

When they release a compatible vue3 version it should work with meilisearch-vue.

[danperks]

"Vue InstantSearch v4.0.0 has been released and now it supports Vue 3 🎉"

https://github.com/algolia/vue-instantsearch/issues/890

[kbellpostman]

@danperks do we need to wait for a meilisearch update or does it work out of the box with vue3?

[danperks]

@danperks do we need to wait for a meilisearch update or does it work out of the box with vue3?

Not tried it unfortunately, as I ended up just using HTTP requests before I found the InstantSearch update, sorry

[TheWh1teRose]

I had the same problem. I solved it by importing InstantSearch from the vue3 directory. import InstantSearch from "vue-instantsearch/vue3/es/src/components/InstantSearch";

[bidoubiwa]

Good to know! Thanks @TheWh1teRose

[bidoubiwa]

Hello @danperks and @TheWh1teRose . I tried to make an example working with Vue 3. See #102. Could you maybe point me out why it is not working?

If you have time of course! That would be very helpful. We want to add one in the docs.

[bidoubiwa]

Example has been added to the readme :)