Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Can't include the Cropper.js module into my Jinja page #1

Closed
haimat opened this issue Jul 2, 2020 · 2 comments
Closed

Can't include the Cropper.js module into my Jinja page #1

haimat opened this issue Jul 2, 2020 · 2 comments

Comments

@haimat
Copy link

haimat commented Jul 2, 2020

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?
@haimat
Copy link
Author

haimat commented Jul 2, 2020

Ok, found the solution here.

@haimat haimat closed this as completed Jul 2, 2020
@app-generator
Copy link
Owner

Thanks for using our products. A double thanks for the fix.
In case you're using Discord, feel free to join the community.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@haimat @app-generator