Unhandled error during execution of mounted hook

[bluelemonade]

I used the panzoom in an older vue2 project.

Now I tested it in a simple vue3 setup, I got Unhandled error during execution of mounted hook at at

and Cannot create panzoom for the current type of dom element

where's the problem?

my package.json

{
  "name": "image-zoom-test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0",
    "vue-panzoom": "^1.1.6"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.15",
    "@vue/cli-plugin-eslint": "~4.5.15",
    "@vue/cli-service": "~4.5.15",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/vue3-essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

main.js

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

// import vue-panzoom
import panZoom from 'vue-panzoom'

// install plugin
app.use(panZoom);

// createApp(App).mount('#app')
app.mount('#app')

and the vue file

<template>
  <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
  <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->

        <!-- apply to an image -->
        <panZoom>
            <img src="https://picsum.photos/300">
        </panZoom>

        <!-- apply to regular dom elements -->
        <panZoom>
            <p>You can zoom me</p>
        </panZoom>

        <!-- apply to svg -->
        <panZoom selector="#g1">
            <svg height="210" width="400">
                <g id="g1">
                    <path d="M150 0 L75 200 L225 200 Z" />
                </g>
            </svg>
        </panZoom>

</template>

<script>

export default {
  name: 'App',
  components: {
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin-top: 0px;
  margin-left:0px;
  background-color: red;
  position : fixed;
  top: 0px;
  left:0px;
  width: 1920px;
  height: 1080px;
}
</style>

[roestigraben]

same problem. Did you get it solved? I am on version 3.2.45 of vue

[CookieCoookie3]

Also looking for a fix for this! If someone figured it out I would be super greatful.

[Winston-Guess]

I found the issue.

In script.js line 42: el = _wrapper.firstChild; needs to be el = _wrapper.firstElementChild;

[arifhussain353]

el = _wrapper.firstElementChild;

Not working. Same issue