Can't include the Cropper.js module into my Jinja page
haimat opened this issue · 2 comments
I am using your dashboard and it's working great so far. However, now I ran into an issue;: To add image cropping support to one of my Flask/Jinja pages (based on your dashboard framework) I followed the Cropper.js usage example on GitHub, added the CSS link to the <head> of my HTML page (between the {% block stylesheets %} and the {% endblock stylesheets %} statements) and added the following to the <body> of my page (between the {% block javascripts %} and the {% endblock javascripts %} statements):
<script src="/static/assets/js/plugins/cropper.min.js" type="module"></script>
<script>
import Cropper from "cropperjs";
const image = document.getElementById('crop_image');
const cropper = new Cropper(image, {
aspectRatio: 1 / 1,
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>The cropper.min.js file can be found, as I see in the Firefox 77.0.1 browser console.
However, I do get the following error message in the console:
SyntaxError: import declarations may only appear at top level of a module
at the first line of the JS <script>:
import Cropper from "cropperjs";I found in this StackOverflow thread that this error might come in Firefox from missing type="module", but as you can see I do have this in my code. Any other ideas what could be wrong here?