vue-pinch-zoom
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
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!
Same issue here, vue 3 compo API, can't use the pinch-zoom component.
There is some updates or workarounds here?
what a bad news! it seems that this component don't support Vue3 currently.