Error initializing vue-panzoom vue 3

[Roman-00]

When using vue-panzoom, it gives an error screenshot attached below, this is a global problem please tell me how to avoid it?

[catalinp2004]

Just sharing in case it helps.

I was actually dealing with the same issue and I managed to fix it but only by modifying the source.

So I copied the vue-panzoom folder from node_modules to the project src folder; Then in the project main.js file I changed the import to: import panZoom from './vue-panzoom' (or wherever you copy it to)

Now the issue seems to be in the vue-panzoom/src/components/pan-zoom/script.js file because this.$panZoomInstance returns undefined in the mounted hook, even though it's defined as null in the data block above. I believe that the $ sign is a convention that it should be defined globally, but it isn't declared anywhere else.

So one of two things will work:

1. Either in the vue-panzoom/src/components/pan-zoom/script.js file literally remove all the dollar signs from the variable names, just replace $panZoomInstance with panZoomInstance everywhere.
2. Or, in vue-panzoom/main.js insert the definition app.config.globalProperties.$panZoomInstance = null; on line 10 and app.prototype.$panZoomInstance = null; on line 14, then in vue-panzoom/src/components/pan-zoom/script.js comment out or remove $panZoomInstance: null, from line 9 in the data block.

I admit, I don't have a very clear idea about what's happening or if the suggested fix is hacky, I just thought I'd share in case it helps anyone.

[Roman-00]

Thanks a lot!