camanjs crop image Cannot read property 'length' of undefined

Question

I'm trying to crop an image using camanjs below is what I've tried

<input type="file" id="file">
<div id="image-editor-preview"></div>

<script>
    document.querySelector('#file').addEventListener('change',function(){
        loadImage(this);
    });

    function loadImage($el){
        if ($el.files && $el.files[0]) {
            let $reader = new FileReader();

            $reader.onload = function(e) {
                let $image = new Image();
                $image.src = e.target.result;
                if( document.querySelector('#image-editor-preview img') != null ){
                    document.querySelector('#image-editor-preview img').remove();
                }
                $image.onload = function(){
                    cropCenter(this.width,this.height);
                }
                document.querySelector('#image-editor-preview').appendChild($image);
            }

            $reader.readAsDataURL($el.files[0]);
        }
    }
    function cropCenter($w,$h){
        let caman = Caman('#image-editor-preview img');

        let $x = ( $w - 300 ) / 2; // get the center
        let $y = ( $h - 300 ) / 2; // get the center

        caman.crop(
            300,
            300,
            $x,
            $y
        );

        caman.render();
    }
</script>

unfortunately it gives me this error

Uncaught TypeError: Cannot read property 'length' of undefined at Renderer.Caman.Renderer.Renderer.execute (camanjs.min.js:160) at Caman.render (camanjs.min.js:54)

any help, ideas please