Agontuk / vue-cropperjs

A Vue wrapper component for cropperjs https://github.com/fengyuanchen/cropperjs
MIT License
937 stars 224 forks source link

Isn't working in Vue 3 with latest v5 #93

Open Awatatah opened 3 years ago

Awatatah commented 3 years ago

On a new install of Vuejs 3, I cannot get this to run.

<template>
    ...
    <vue-cropper ref="cropper" :src="imgSrc" alt="Source Image"></vue-cropper>
    ...
</template>
<script lang="ts">
    ...
    import VueCropper from 'vue-cropperjs'
    import 'cropperjs/dist/cropper.css'
    ...

    @Component({
      components: {
        VueCropper,
      },
      ...
    })
    ...
</script>

Error in console:

[Vue warn]: Error in render: "TypeError: (0 , _vue.h) is not a function

TypeError: (0 , _vue.h) is not a function at Proxy.render (VueCropper.js?95c3:23) at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:3548) at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4066) at Watcher.get (vue.runtime.esm.js?2b0e:4479) at new Watcher (vue.runtime.esm.js?2b0e:4468) at mountComponent (vue.runtime.esm.js?2b0e:4073) at VueComponent.Vue.$mount (vue.runtime.esm.js?2b0e:8415) at init (vue.runtime.esm.js?2b0e:3118) at createComponent (vue.runtime.esm.js?2b0e:5978) at createElm (vue.runtime.esm.js?2b0e:5925)

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in mounted hook: "Error: The first argument is required and must be an or element." Error: The first argument is required and must be an or element. at new Cropper (cropper.js?bab4:3223) at VueComponent.mounted (VueCropper.js?95c3:159) at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854) at callHook (vue.runtime.esm.js?2b0e:4219) at Object.insert (vue.runtime.esm.js?2b0e:3139) at invokeInsertHook (vue.runtime.esm.js?2b0e:6346) at VueComponent.patch [as patch] (vue.runtime.esm.js?2b0e:6565) at VueComponent.Vue._update (vue.runtime.esm.js?2b0e:3948) at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4066) at Watcher.get (vue.runtime.esm.js?2b0e:4479)

I do have dependency installed for types "@types/vue-cropperjs": "^4.1.1",

Agontuk commented 3 years ago

Can you try the example project ? It's running fine for me in vue 3

majeeddl commented 3 years ago

I have had same problem with latest version

BernardObinna commented 3 years ago

Also having the same issue using the example file. Previous version (4.2.0) works fine though. Nice work.

williamweckl commented 3 years ago

I'm having the same issue using vue 2 with composition api... It should work with vue 2 using composition api? Maybe version 5 should be still compatible with vue 2, this would make easier to upgrade a vue 2 project to vue 3 incrementally...

Agontuk commented 3 years ago

I'm having the same issue using vue 2 with composition api... It should work with vue 2 using composition api? Maybe version 5 should be still compatible with vue 2, this would make easier to upgrade a vue 2 project to vue 3 incrementally...

What's wrong with v4.2.0 ? It works fine with vue 2. It's not possible to make v5 compatible with vue 2 because vue 3 has breaking changes in render function API.

https://v3.vuejs.org/guide/migration/render-function-api.html#overview

zhangv commented 6 days ago

I am experiencing same issue here.

"cropperjs": "^2.0.0-rc.1",
"vue-cropperjs": "^5.0.0",
"vue": "^3.4.18"

It give me this error:

Uncaught (in promise) Error: The first argument is required and must be an or element. at new Cropper2 (vue-cropperjs.js?v=3fd40a8c:39152:19) ....