I'm trying to crop the image before uploading and I'm using Croppie.js plugin but I don't know I'm getting "Uncaught TypeError: $(...).croppie is not a function" this error in console.

I tried to use this plugin at the end of the file just before the body and also tried in the head and between the html but I'm getting the same error. I don't know why this is happening.

Here's my code.

<script src="jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.min.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo base_url()?>assets/croppie/croppie.css" />
<script type="text/javascript">
$(document).ready(function(){    
$image_crop = $('#upload-image').croppie({
    enableExif: true,
    viewport: {
        width: 200,
        height: 200,
        type: 'square'
    },
    boundary: {
        width: 300,
        height: 300
    }
});
$('#userPhoto').on('change', function () { 
    var reader = new FileReader();
    reader.onload = function (e) {
        $image_crop.croppie('bind', {
            url: e.target.result
        }).then(function(){
            console.log('jQuery bind complete');
        });         
    }
    reader.readAsDataURL(this.files[0]);
});
$('#crop').on('click', function (ev) {
    $image_crop.croppie('result', {
        type: 'canvas',
        size: 'viewport'
    }).then(function (response) {
        $.ajax({
            url: "upload.php",
            type: "POST",
            data: {"image":response},
            success: function (data) {
                html = '<img src="' + response + '" />';
                $("#upload-image-i").html(html);
            }
        });
    });
}); 
});
</script>

I've tried all the code in a single file and it's working fine there.