Javascript Can'；不要在我的代码中包含crapper.js模块

为了向我的Flask/Jinja页面之一添加图像裁剪支持，我在GitHub上使用了CSS链接，将CSS链接添加到我的HTML页面的

，并将以下内容添加到我的页面的

：

从“cropperjs”导入裁剪器；
const image=document.getElementById（'crop_image'）；
常量裁剪器=新裁剪器（图像{
方面：1/1，
作物（活动）{
console.log（event.detail.x）；
console.log（event.detail.y）；
日志（event.detail.width）；
控制台日志（事件、细节、高度）；
console.log（event.detail.rotate）；
console.log（event.detail.scaleX）；
console.log（event.detail.scaleY）；
},
});

可以找到

crapper.min.js

文件，正如我在Firefox 77.0.1浏览器控制台中看到的那样。
但是，我在控制台中确实收到以下错误消息：

SyntaxError: import declarations may only appear at top level of a module

在JS

的第一行：

从“cropperjs”导入裁剪器；

---

我发现这个错误可能是由于Firefox中缺少

type=“module”

，但正如您所看到的，我的代码中确实有这个错误。还有什么其他想法吗？

您在外部脚本上有

type=module

，但在由于存在导入而失败的脚本上没有，并且

type=module

没有

所以

从“cropperjs”导入裁剪器；

---

应该做这个把戏

好的，终于找到了解决办法。 记录如下：

---

我需要从JS脚本链接中删除

type=“module”

部分，并删除

import crope

行。两个都删除了，现在就可以了。

我也遇到了同样的问题。这就解决了问题

在您选择的静态文件夹中安装整个软件包（及其所有依赖项）非常重要。这应完整安装整个软件包：

npm install cropperjs

从该包的dist文件夹调用模块将确保调用其所有依赖项。因此，我有以下想法：

<link rel="stylesheet" href="{% static 'styles/cropperjs/dist/cropper.css' %}">

这在脚本部分：

<script type="text/javascript" src="{% static 'styles/cropperjs/dist/cropper.js' %}"></script>

---

此外，正如@Matthias所建议的，您不需要import语句，无论它是内联脚本还是不同的JS文件。

您正在哪个浏览器中尝试此操作？@Charlie如我的帖子所述：Firefox 77.0.1这样做会导致Firefox控制台中出现以下错误：“TypeError:错误解析模块说明符：cropperjs”我只是在复制你的代码。对于模块名，请查看其声明。错误表明cropperjs不是在cropper.min.js中声明的模块快速查看库文档后，我想您必须导入

cropper.esm.js

（ES模块）

<script type="text/javascript" src="{% static 'styles/cropperjs/dist/cropper.js' %}"></script>