vue-pinch-zoom icon indicating copy to clipboard operation
vue-pinch-zoom copied to clipboard

Adding vue-pinch-zoom in ionic 6 causes "expected an object or null, got undefined" in vue-router.esm-bundler.js

Open helen-fornazier opened this issue 2 years ago • 3 comments

Hello o/ First of all, thanks for this project!

I'm trying to use this module in my ionic 6 project with vue.js, but I'm getting an error, I would appreciate if anyone could shed some light (thanks in advance).

What I did:

npm i vue-pinch-zoom

Then in my vue page I have:

<template>
...
    <pinch-zoom>
            <img :src="mapa" /> 
    </pinch-zoom>
...
</template>

<script lang="ts">
...
import PinchZoom from 'vue-pinch-zoom';
...
export default defineComponent({
  name: 'MrMapa',
  components: {
 ...
    PinchZoom,
  },
  setup() {
    const mapa = computed(() => require('@/assets/mapa-teste.png'));
    return {
        mapa,
    };
  },
});
</script>

But when I load the page, I'm getting the following in the console:

TypeError: Object.setPrototypeOf: expected an object or null, got undefined
    extendStatics PinchZoom.umd.js:2584
    __extends PinchZoom.umd.js:2588
    Appvue_type_script_lang_ts_PinchZoom PinchZoom.umd.js:4440
    fb15 PinchZoom.umd.js:4613
    __nested_webpack_require_652__ PinchZoom.umd.js:30
    <anonymous> PinchZoom.umd.js:94
    <anonymous> PinchZoom.umd.js:97
    webpackUniversalModuleDefinition PinchZoom.umd.js:3
    <anonymous> PinchZoom.umd.js:10
    js VueJS
    __webpack_require__ app.js:282
    fn app.js:537
    <anonymous> index.js:4
    ts VueJS
    __webpack_require__ app.js:282
    fn app.js:537
    <anonymous> MrMapa.vue:5
    ts VueJS
    __webpack_require__ app.js:282
    fn app.js:537
    <anonymous> MrMapa.vue:3
    vue VueJS
    __webpack_require__ app.js:282
    fn app.js:537
    promise callback*component index.ts:11
    extractComponentsGuards vue-router.esm-bundler.js:2021
    navigate vue-router.esm-bundler.js:3143
    promise callback*navigate vue-router.esm-bundler.js:3138
    pushWithRedirect vue-router.esm-bundler.js:3030
    push vue-router.esm-bundler.js:2966
    navigate index.esm.js:578
    handleRouterLink index.esm.js:181
    handleClick index.esm.js:198
    patchStopImmediatePropagation runtime-dom.esm-bundler.js:380
    callWithErrorHandling runtime-core.esm-bundler.js:155
    callWithAsyncErrorHandling runtime-core.esm-bundler.js:164
    callWithAsyncErrorHandling runtime-core.esm-bundler.js:174
    invoker runtime-dom.esm-bundler.js:366
    addEventListener runtime-dom.esm-bundler.js:316
    patchEvent runtime-dom.esm-bundler.js:334
    patchProp runtime-dom.esm-bundler.js:398
    mountElement runtime-core.esm-bundler.js:4603
    processElement runtime-core.esm-bundler.js:4566
    patch runtime-core.esm-bundler.js:4486
    componentUpdateFn runtime-core.esm-bundler.js:5037
    run reactivity.esm-bundler.js:167
    setupRenderEffect runtime-core.esm-bundler.js:5156
    mountComponent runtime-core.esm-bundler.js:4939
    processComponent runtime-core.esm-bundler.js:4897
    patch runtime-core.esm-bundler.js:4489
    mountChildren runtime-core.esm-bundler.js:4685
    mountElement runtime-core.esm-bundler.js:4594
    processElement runtime-core.esm-bundler.js:4566
    patch runtime-core.esm-bundler.js:4486
    componentUpdateFn runtime-core.esm-bundler.js:5037
    run reactivity.esm-bundler.js:167
    setupRenderEffect runtime-core.esm-bundler.js:5156
    mountComponent runtime-core.esm-bundler.js:4939
    processComponent runtime-core.esm-bundler.js:4897
    patch runtime-core.esm-bundler.js:4489
    mountChildren runtime-core.esm-bundler.js:4685
    processFragment runtime-core.esm-bundler.js:4856
    patch runtime-core.esm-bundler.js:4482
    mountChildren runtime-core.esm-bundler.js:4685
    mountElement runtime-core.esm-bundler.js:4594
    processElement runtime-core.esm-bundler.js:4566
vue-router.esm-bundler.js:3302

The image loads fine without the pinch-zoom component.

Any help would be great, thanks a lot!

helen-fornazier avatar May 10 '22 18:05 helen-fornazier

Same issue here, vue 3 compo API, can't use the pinch-zoom component.

image

lugeib avatar Oct 13 '22 17:10 lugeib

There is some updates or workarounds here?

brunoinds avatar Nov 21 '22 14:11 brunoinds

what a bad news! it seems that this component don't support Vue3 currently.

lotusPigeon avatar Dec 11 '23 09:12 lotusPigeon