Import error

[Eboubaker]

npm i --save vue-image-zoomer

          <v-carousel>
            <v-carousel-item v-for="(image, index) in images" :key="index" class="carousal-image">
              <vue-image-zoomer regular="path-to-regular.jpg" />
            </v-carousel-item>
          </v-carousel>

import Component from "vue-class-component";
import Vue from "vue";
import VueImageZoomer from 'vue-image-zoomer'
import 'vue-image-zoomer/dist/style.css';

@Component({components: {VueImageZoomer}})
export default class Product extends Vue {
....
}

"dependencies": {
    "@mdi/font": "^6.5.95",
    "@types/aos": "^3.0.7",
    "@vue/compiler-dom": "^3.2.40",
    "aos": "^2.3.4",
    "axios": "^0.21.4",
    "libphonenumber-js": "^1.9.17",
    "lodash": "^4.17.21",
    "moment": "^2.29.1",
    "postcss": "^8.4.20",
    "swiper": "^11.0.4",
    "text-mask-addons": "^3.8.0",
    "vue": "^2.6.11",
    "vue-awesome": "^4.1.0",
    "vue-class-component": "^7.2.3",
    "vue-image-zoomer": "^2.2.3",
    "vue-meta": "^2.4.0",
    "vue-property-decorator": "^9.1.2",
    "vue-router": "^3.2.0",
    "vue-text-mask": "^6.1.2",
    "vuetify": "^2.4.0",
    "vuex": "^3.4.0",
    "vuex-class-modules": "^1.3.0"
  },

[Eboubaker]

And warnings in npm console started showing

 WARNING  Compiled with 16 warnings                                                                                                             2:12:02 PM

 warning  in ./node_modules/vue-image-zoomer/dist/vue-image-zoomer.es.js

"export 'Fragment' was not found in 'vue'

 warning  in ./node_modules/vue-image-zoomer/dist/vue-image-zoomer.es.js

"export 'Transition' was not found in 'vue'

 warning  in ./node_modules/vue-image-zoomer/dist/vue-image-zoomer.es.js

"export 'createCommentVNode' was not found in 'vue'

 warning  in ./node_modules/vue-image-zoomer/dist/vue-image-zoomer.es.js

"export 'createElementBlock' was not found in 'vue'

 warning  in ./node_modules/vue-image-zoomer/dist/vue-image-zoomer.es.js

"export 'createElementVNode' was not found in 'vue'

 warning  in ./node_modules/vue-image-zoomer/dist/vue-image-zoomer.es.js

"export 'createVNode' was not found in 'vue'

 warning  in ./node_modules/vue-image-zoomer/dist/vue-image-zoomer.es.js

"export 'normalizeClass' was not found in 'vue'

 warning  in ./node_modules/vue-image-zoomer/dist/vue-image-zoomer.es.js

"export 'normalizeStyle' was not found in 'vue'

 warning  in ./node_modules/vue-image-zoomer/dist/vue-image-zoomer.es.js

"export 'openBlock' was not found in 'vue'

 warning  in ./node_modules/vue-image-zoomer/dist/vue-image-zoomer.es.js

"export 'renderList' was not found in 'vue'

 warning  in ./node_modules/vue-image-zoomer/dist/vue-image-zoomer.es.js

"export 'renderSlot' was not found in 'vue'

 warning  in ./node_modules/vue-image-zoomer/dist/vue-image-zoomer.es.js

"export 'resolveDirective' was not found in 'vue'

 warning  in ./node_modules/vue-image-zoomer/dist/vue-image-zoomer.es.js

"export 'vShow' was not found in 'vue'

 warning  in ./node_modules/vue-image-zoomer/dist/vue-image-zoomer.es.js

"export 'withCtx' was not found in 'vue'

 warning  in ./node_modules/vue-image-zoomer/dist/vue-image-zoomer.es.js

"export 'withDirectives' was not found in 'vue'

 warning  in ./node_modules/vue-image-zoomer/dist/vue-image-zoomer.es.js

"export 'withModifiers' was not found in 'vue'

[samjonesigd]

You're using Vue3 version with Vue2

See legacy version here https://www.npmjs.com/package/vue-image-zoomer/v/1.5.0

[Eboubaker]

Ah I see, I did a workaround by shamelessly stealing the code of VueImageZoomer.vue and put it in my src with small tweaks

[samjonesigd]

@Eboubaker its open source :) but the 1.5.0 version should work for you, I still maintain the Vue 2 version when I do updates. Got some coming soon

[Eboubaker]

Ok, that's nice of you, one suggestion though is to put a note in your readme after the npm install command to add the alternative vue2 version. because I followed the npm page readme and there is no mention of version difference there.

[samjonesigd]

@Eboubaker

It's in the first paragraph, but I should make it make more sense :) but that's a good idea too.

[Eboubaker]

Yes I Didn't see it till I started editing README.md .., you know us web developers don't like to read and go straight looking for npm install xxx commands