cropperjs: TypeError: Cropper is not a constructor

Hey,

First thx for the amazing library.

I tried to update my Ionic2/Angular2 project from Cropperjs 0.7.2 (who works like a charm) to the last version of Croppersjs 0.8.1.

After this updated I’m now facing at runtime the following error:

browser_adapter.js:84 EXCEPTION: TypeError: Cropper is not a constructor

Could you please help me to fix the problem?

My code

<div id="preview" *ngIf="imgURI != null">
     <img (load)="imageLoaded()" [src]="imgURI" #imageSrc>
 </div>

 import * as Cropper from 'cropperjs';
....
@ViewChild('imageSrc') input: ElementRef;
 ....
imageLoaded() {
    this.cropper = new Cropper(this.input.nativeElement, {
        viewMode: 3,
        aspectRatio: 1 / 1,
        dragMode: 'move',
        modal: true,
        guides: false,
        highlight: true,
        background: true,
        autoCrop: true,
        autoCropArea: 0.9,
        responsive: true,
        crop: (e:any) => {

        }
    });
}

also not, I use the typings typescript definition (dt~cropperjs)

Thx in advance

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 1
Comments: 27 (1 by maintainers)

Most upvoted comments

Ok, I had to import it via import Cropper = require('cropperjs');. It’s working now.

sosnet on Feb 14, 2017

import Cropper from 'cropperjs';

import { Cropper } from 'cropperjs';

fengyuanchen on Sep 25, 2016

If any one is still having issues this would be the proper way to import it

import * as Cropper from 'cropperjs';
const cropper = new Cropper.default(image, {})

dankcellar on Dec 11, 2019

@sosnet which typescript version are you using? I guess there is the difference.

I use es2015, that is why "import Cropper from ‘cropperjs’; " works for me.

peterpeterparker on Feb 17, 2017

I’m having this issue using browserify. require('cropperjs') returns an object with a default property that is the actual constructor.

andrejcremoznik on Sep 29, 2016