HI @Andy-MS, @sarunint, @dklmuc

I tried using the @types/croppie I get the following issue at runtime

Uncaught TypeError: croppie_1.default is not a constructor.

Import:
import Croppie from "croppie";

Usage:
this.croppie = new Croppie(this.avatarImage,
{
viewport: { width: 256, height: 256, type: this.viewPortType },
boundary: { width: 410, height: 410 },
showZoomer: true,
});

In order to get around this problem I used the following.

Import:
import * as Croppie from "croppie";

Usage:
this.croppie = new Croppie.Croppie(this.avatarImage,
{
viewport: { width: 256, height: 256, type: this.viewPortType },
boundary: { width: 410, height: 410 },
showZoomer: true,
});

This works fine at runtime but i get the following error during typescript compilation phase

error TS2339: Property 'Croppie' does not exist on type 'typeof ".../node_modules/@types/croppie/index"'.
[14:31:25] gulp-notify: [Error running Gulp] Error: ...\avatar-modal.ts(43,40): error TS2339: Property 'Croppie' does not exist on type 'typeof ".../node_modules/@types/croppie/index"'.