Gives an error cropper?

Question

JavaScript

this method of uploading a photo

loadAvatar(event) {
                this.profile.image = event.target.files[0];
                const image = document.getElementById('crrop-image');
                let cropper;
                const that = this;
                readURL(event);
                function readURL(input) {
                    if (input.target.files && input.target.files[0]) {
                        let reader = new FileReader();
                        reader.onload = function (e) {
                            image.src = e.target.result;
                            that.profile.avatar = e.target.result;
                            console.log(e.target.result);
                        };
                        reader.readAsDataURL(input.target.files[0]);
                    }

                }
                $.magnificPopup.open({
                    items: {
                        src: '#cropper_avatar',
                        type: 'inline'
                    }
                });
                cropper = new Cropper(image, {
                    aspectRatio: 1,
                    viewMode: 3,
                });
            },

but it throws an error

[Vue warn]: Error in v-on handler: "ReferenceError: Cropper is not defined"

found in

---> <Profile> at resources/js/components/Cabinet/Profile/Profile.vue
       <Root>
warn @ cabinet.js:28114
logError @ cabinet.js:29373
globalHandleError @ cabinet.js:29368
handleError @ cabinet.js:29328
invokeWithErrorHandling @ cabinet.js:29351
invoker @ cabinet.js:29668
original._wrapper @ cabinet.js:35021
cabinet.js:29377 ReferenceError: Cropper is not defined
    at VueComponent.loadAvatar (cabinet.js:2532)
    at invokeWithErrorHandling (cabinet.js:29343)
    at HTMLInputElement.invoker (cabinet.js:29668)
    at HTMLInputElement.original._wrapper (cabinet.js:35021)

Answer 1

Make cropper global and try again