Agontuk/vue-cropperjs

Property does not exist on Type (Vue 3 + setup syntax + TS)

Opened this issue · 0 comments

I am getting compiler errors when using the cropper along with Vue 3 setup syntax and TypeScript.

AppComponent.vue

<template>
    <vue-cropper ref="cropper" src="demo.jpg" />
</template>

<script setup lang="ts">
    import { ref, onMounted } from "vue";
    import VueCropper from "vue-cropperjs";

    const cropper = ref<InstanceType<typeof VueCropper>>();

    onMounted(() => {
        // This throws a compiler error (Property "reset" does not exist on type...)
        cropper.value?.reset();
    });
</script>

For each method called this way I am getting a compiler error.

TS2339: Property 'reset' does not exist on type 'CombinedVueInstance<Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => V
ue<Record<string, any>, Record<string, any>, never, never, ...>>, ... 7 more ..., OptionTypesType<...>>'.

I have the following node packages installed.

  • "vue": "^3.3.9"
  • "vue-cropperjs": "^5.0.0"
  • "@types/vue-cropperjs": "^4.1.6"
  • "typescript": "^5.2.2"
  • "webpack": "^5.74.0"