尝试导入 Cropperjs 给出：TypeError：解析模块说明符时出错：cropperjs

Posted 2023-02-25

【中文标题】尝试导入 Cropperjs 给出：TypeError：解析模块说明符时出错：cropperjs

【英文标题】：Trying to import Cropperjs gives: TypeError: Error resolving module specifier: cropperjs

【发布时间】：2019-02-18 12:54:04

【问题描述】：

我想将 fengyuanchen/cropperjs 添加到图像元素中，但是当页面加载时，我在控制台 TypeError: Error resolving module specifier: cropperjs 中收到此错误。

我正在使用官方github页面https://github.com/fengyuanchen/cropperjs上提供的js和css的CDN链接

我已尝试按照 github 页面上的“入门”进行操作。我添加了 CDN 链接，创建了一个带有 id uploaded-img 图像的 div，然后在页面底部添加了一个带有页面提供代码的脚本标签

<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>

我用谷歌搜索了这个，发现其他人在导入时遇到了麻烦，推荐的解决方案是用 import Cropper from 'cropperjs/dist/cropper.esm.js'; 替换 import Cropper from 'cropperjs'; 或创建一个 var 并像这样要求它。还有人建议我应该使用"./cropperjs" 或"../cropperjs"。但上述变化都不起作用。

我做错了什么？

【参考方案1】：

因此，我通过下载cropper.js 而不是使用CDN 链接以及复制粘贴可以在官方github 页面(https://github.com/fengyuanchen/cropperjs/tree/master/examples) 上找到的示例模式并修改那里的代码。

【讨论】：

我遇到了完全相同的问题，但无法正常工作。能否请你这么好心，告诉我你用来解决这个问题的代码？