Trying to import Cropperjs gives: TypeError: Error resolving module specifier: cropperjs

Question

I want to add fengyuanchen/cropperjs to an image element, but when the page loads I get this error in console TypeError: Error resolving module specifier: cropperjs.

I am using CDN links for js and css provided on the official github page https://github.com/fengyuanchen/cropperjs

I have tried following the "Getting started" on the github page. I added CDN links, created a div with an image of an id uploaded-img, and then at the bottom of the page I added a script tag with the supplied code from the page

<script>
    import Cropper from 'cropperjs';

    const image = document.getElementById('uploaded-img');
    const cropper = new Cropper(image, {
          aspectRatio: 16 / 9,
          crop(event) {
            console.log(event.detail.x);
            console.log(event.detail.y);
            console.log(event.detail.width);
            console.log(event.detail.height);
            console.log(event.detail.rotate);
            console.log(event.detail.scaleX);
            console.log(event.detail.scaleY);
          },
    });
</script>

I have googled this and found other people having troubles with importing, and the recommended solutions were to substitute import Cropper from 'cropperjs'; with either import Cropper from 'cropperjs/dist/cropper.esm.js'; or to create a var and to require it like that. Also someone suggested that I should use "./cropperjs" or "../cropperjs". But none of the above variations worked.

What am I doing wrong?

Answer 1

So I have managed to get this working by downloading the cropper.js instead of using the CDN link, and also by copy-pasting the example modals that can be found on the official github page (https://github.com/fengyuanchen/cropperjs/tree/master/examples) and modifying the code from there.