Cannot read property '_init' of null vue-cropperjs

Question

I have a project that works for Laravel + VueJs. But I am beginner and my skills in using Vue are too low. In this project i have to use cropper-js (https://github.com/fengyuanchen/cropperjs#cropperjs). I found an implementation this library special for vue-js (https://github.com/Agontuk/vue-cropperjs). I copied from package.json one string

"vue-cropperjs": "https://github.com/Agontuk/vue-cropperjs.git#master"

and execute

npm install

than, in my app.js, i wrote

import VueCropper from 'vue-cropperjs'; Vue.use(VueCropper);

and after start the application, in console, i see next text

Cannot read property '_init' of null

Also i tried use that code directly in the component file

<template>
<div class="col-md-12">
    <input type="file" name="image" accept="image/*"
           style="font-size: 1.2em; padding: 10px 0;"
           @change="setImage($event)"
    />
</div>
</template>
<script>
    import VueCropper from 'vue-cropperjs';
    export default {
        name : 'userfiles',
        data: function(){
        return {
            imgSrc: '',
            cropImg: ''
        }
    },
    methods:{
        setImage(e){
            const file = e.target.files[0];
            if (!file.type.includes('image/')) {
                alert('Please select an image file');
                return;
            }
            if(typeof FileReader === 'function'){
                const reader = new FileReader();
                reader.onload = (event) => {
                    this.imgSrc = event.target.result;
                    this.cropper.replace(event.target.result);
                };
                reader.readAsDataURL(file);
            }else{
                alert('Sorry, FileReader API not supported');
                }
            }
        }
    }
</script>

this code i copied from here (https://github.com/Agontuk/vue-cropperjs/blob/master/example/src/App.js).

but now i get

Cannot read property 'replace' of undefined

Anybody can tell what the error is and what I'm doing wrong?

Answer 1

It seem like you are not directly copy the source. The line this.cropper.replace(event.target.result); causes the error. There is no copper as props/data/method/computed/ref etc in your component.

In the source, there is a render function which <vue-cropper ref='cropper' ...> and later the code use this reference this.$refs.cropper. You can find more information about ref here.