cropper component is not working - TypeError: Object(...) is not a function

[pratimawaghmare]

I have a Vue app where I call the cropper component in a modal, the modal is called onclick of an icon. whenever I click on the icon to open the modal it shows the below errors,

TypeError: Object(...) is not a function
    at push../node_modules/vue-advanced-cropper/dist/index.esm-bundler.js.be.render (index.esm-bundler.js:21:77911)

TypeError: Cannot read properties of undefined (reading 'addEventListener')

Here is a code snippet for it

<b-modal>
  <div>
    <cropper
      class="cropper"
      :src="image.src"
      @change="crop"
      :stencil-props="{
        aspectRatio: 1,
      }"
    ></cropper>
    <preview
      v-if="previewImage"
      :width="120"
      :height="120"
      :image="previewImage"
      :coordinates="coordinates"
    />
  </div>
  <div class="button-wrapper">
    <input
      type="file"
      ref="file"
      @change="loadImage($event)"
      accept="image/png, image/jpg, image/jpeg"
    />
  </div>
</b-modal>

I also see some warnings like this in the logs

./node_modules/vue-advanced-cropper/dist/index.esm-bundler.js 21:25613-25614"export 'Fragment' (imported as 'r') was not found in 'vue'./node_modules/vue-advanced-cropper/dist/index.esm-bundler.js 21:26054-26055"export 'Fragment' (imported as 'r') was not found in 'vue'./node_modules/vue-advanced-cropper/dist/index.esm-bundler.js 21:4154-4155"export 'createBlock' (imported as 'e') was not found in 'vue'./node_modules/vue-advanced-cropper/dist/index.esm-bundler.js 21:5191-5192"export 'createBlock' (imported as 'e') was not found in 'vue'./node_modules/vue-advanced-cropper/dist/index.esm-bundler.js 21:5952-5953"export 'createBlock' (imported as 'e') was not found in 'vue'./node_modules/vue-advanced-cropper/dist/index.esm-bundler.js 21:19969-19970"export 'createBlock' (imported as 'e') was not found in 'vue'./node_modules/vue-advanced-cropper/dist/index.esm-bundler.js 21:21085-21086"export 'createBlock' (imported as 'e') was not found in 'vue'./node_modules/vue-advanced-cropper/dist/index.esm-bundler.js 21:25512-25513"export 'createBlock' (imported as 'e') was not found in 'vue'

[Norserium]

@pratimawaghmare, what's the version of vue / vue-advanced-cropper do you use?

[pratimawaghmare]

I am using Vue 3 and vue-advanced-cropper 2.8.3.

[Norserium]

@pratimawaghmare, what's exactly version of vue do you use?

In any case, it's hard to reproduce your bug, so I need your help here. Did you try to move cropper outside the modal window?

[pratimawaghmare]

@Norserium sorry, I got confused with some other project's version. Actually, I am using Vue version 2.6.12 and vue-advanced-cropper version 1.11.1. And, yes I tried rendering the cropper outside the modal window, but I am getting the same error.

[Norserium]

@pratimawaghmare, look more carefully. I'm pretty sure that you have versions mismatch. I assume that you have indeed vue@2.x.x, but you have installed vue-advanced-cropper@2.x.x. Check the actual version in the node_modules/vue-advanced-cropper/package.json.

[pratimawaghmare]

you were right, it was a version mismatch, uninstalling and reinstalling the library resolved it. Thanks for the help.

[Norserium]

@pratimawaghmare, you are welcome!

[ProphetRen]

Which version do I need to install to fix this problem?

[Norserium]

@ProphetRen, that's easy. If you use Vue 2 you should install vue-advanced-cropper@latest, if you use Vue 3 you should install vue-advanced-cropper@next.