question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Isn't working in Vue 3 with latest v5

See original GitHub issue

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 <canvas> element.” Error: The first argument is required and must be an or <canvas> 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",

Issue Analytics

  • State:open
  • Created 3 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

4reactions
BernardObinnacommented, Mar 3, 2021

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

0reactions
Agontukcommented, 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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Vuejs 3 webpack : Problem with vue-template-compiler
To make vue 3 work fine with webpack without using vite or vue cli follow these steps : init the package.json like :....
Read more >
Build Targets
When you run vue-cli-service build , you can specify different build targets via the --target option. This allows you to use the same...
Read more >
Frequently asked questions
My application is not working. First, ensure that you're using the latest version of Vue.js and Vuetify. Try to reproduce it in codepen ......
Read more >
How to Use Vue CLI for Easier VueJS Project Management
In this blog post, you are going to learn how to use the Vue CLI 3.0 graphic user interface to create, import, manage,...
Read more >
[RANT] How Vue 3 drove me away : r/vuejs
I already chose React for the project I started last week, and I honestly wish ... The ecosystem isn't broken or fragmented -...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found