Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Awatatah opened this issue Feb 26, 2021 · 5 comments
Open

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

Awatatah opened this issue Feb 26, 2021 · 5 comments

Comments

@Awatatah
Copy link

Awatatah commented Feb 26, 2021

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",

@Awatatah Awatatah changed the title Isn't work in Vue 3 with latest v5 Isn't working in Vue 3 with latest v5 Feb 26, 2021
@Agontuk
Copy link
Owner

Agontuk commented Feb 26, 2021

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

@majeeddl
Copy link

majeeddl commented Mar 1, 2021

I have had same problem with latest version

@BernardObinna
Copy link

BernardObinna commented Mar 3, 2021

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

@williamweckl
Copy link

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
Copy link
Owner

Agontuk commented Apr 23, 2021

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants