TypeError: Cannot destructure property 'popperId' of 'undefined' as it is undefined.

[bufgix]

I'm migrating from Vue2 to Vue3. I changed the package name v-tooltip => floating-vue and I just use v-tooltip directive so i just register the directive like:

import { VTooltip } from 'floating-vue'
   
//...
app.directive('tooltip', VTooltip)

and I'm getting error when I use directive

 <h3 v-tooltip="'test popover'"  v-text="$t('Welcome Back')" />

Uncaught (in promise) TypeError: Cannot destructure property 'popperId' of 'undefined' as it is undefined.

Some warnings before throwing this error

Im on the migration process and i use @vue/compat (Migration Build) on Vue 2 mode.

floating-vue version is ^2.0.0-beta.20

[junaidshad]

did you figure out the issue?

[bufgix]

did you figure out the issue?

Nope. I cancelled vue 3 migration still using v-tooltip for vue 2 :( @junaidshad

[jarooda]

it looks like we will encounter this error if we use MODE: 2 in @vue/compat to remove the error, use MODE: 3 in compat cofiguration

import { configureCompat } from 'vue'

...

export default {
  install (app) {
    configureCompat({
      MODE: 3
    })
    app.directive('tooltip', VTooltip)
    app.directive('close-popper', VClosePopper)
  })
}

[junaidshad]

@jarooda For me it didn't work even with MODE: 3.... it just worked after i removed the @vue/compat migration build package. Most of the third party dependencies does not support vue compat migration build.

[vgshenoy]

Anybody have this working yet?

Hitting roadblocks on our migration to Vue 3 with this.

Also made a minimal repro at https://stackblitz.com/edit/node-whjkss?file=src/Playground.vue

Hoping someone can point me in the right direction 🙏

[junaidshad]

@vgshenoy No, No luck in getting it work under the @vue/compat migration build so far.

[callumacrae]

as a workaround we've been using the vue 2 version of the library, which works with vue 3 + compat mode

it would be really great to see a fix for this though!

[alecgibson]

as a workaround we've been using the vue 2 version of the library

This doesn't work for us; we get this error instead:

Cannot read properties of undefined (reading 'theme')
TypeError: Cannot read properties of undefined (reading 'theme')
    at Proxy.eval (webpack-internal:///./node_modules/floating-vue/dist/floating-vue.es.js:226:35)
    at resolvePropValue (webpack-internal:///./node_modules/@vue/compat/dist/vue.esm-bundler.js:7298:53)
    at setFullProps (webpack-internal:///./node_modules/@vue/compat/dist/vue.esm-bundler.js:7274:20)
    at initProps (webpack-internal:///./node_modules/@vue/compat/dist/vue.esm-bundler.js:7097:3)
    at setupComponent (webpack-internal:///./node_modules/@vue/compat/dist/vue.esm-bundler.js:10489:3)
    at mountComponent (webpack-internal:///./node_modules/@vue/compat/dist/vue.esm-bundler.js:8801:7)
    at processComponent (webpack-internal:///./node_modules/@vue/compat/dist/vue.esm-bundler.js:8766:9)
    at patch (webpack-internal:///./node_modules/@vue/compat/dist/vue.esm-bundler.js:8254:11)
    at ReactiveEffect.componentUpdateFn [as fn] (webpack-internal:///./node_modules/@vue/compat/dist/vue.esm-bundler.js:8913:11)
    at ReactiveEffect.run (webpack-internal:///./node_modules/@vue/compat/dist/vue.esm-bundler.js:652:19)

Presumably because this is no longer defined in the props default function, and trying to directly copy a reference to this.$props sidesteps the shim

[alecgibson]

Okay did some more digging using vue@3 with floating-vue@2.

I don't think this library plays nicely with the compatibility build and the render function break.

The library works for us if we disable the RENDER_FUNCTION compatibility flag:

import {configureCompat} from 'vue';

configureCompat({
  RENDER_FUNCTION: false,
});

[luisrossi]

To solve this problem, I had to create myself a directive that does the tooltip behavior, using floating-ui/dom.

After migrating to vue 3, he intends to remove this created directive and use the one from the component.

[omairmir]

did you figure out the issue?

@junaidshad hi buddy how did you manage to solve this issue when you were migrating CS back then?

[junaidshad]

@omairmir Hey! Back then, we discarded this package and switched to vue-tippy plugin (https://www.npmjs.com/package/vue-tippy).

appContainer.use(VueTippy, { directive: 'tooltip', arrow: true })

This is how it was used. This way we didn't had to change the v-tooltip directive inside vue components.