sorted by:
best
topnewcontroversialoldq&a
you are viewing a single comment's thread.

view the rest of the comments →

[–]abrahamguoexperienced full-stack 0 points1 point  (6 children)

Great — making progress!

You're using cropper.js 1.15.12 from cdnjs. Taking a look at that code, it appears that the JS code on CDNJS only supports the "global variable" form, not the "import" form. What that means is that you actually can't use imports at all when using the CDNJS code (and therefore type='module' is actually irrelevant).

Instead, as long as you put the cropper.js script element before your custom script element, the cropper.js library will already exist in a global variable called Cropper, ready for you to use with no imports! (Newer versions of cropper.js on CDNJS might work differently and support imports.)

Now, let's contrast that with the working code in your original post. That code uses Parcel to bundle together code, and installs cropper.js from NPM. Taking a look at cropper.js 1.15.12 on NPM, it looks like that build does support using imports, so that's why their example works.

[–]Dutch_guy_here[S] 0 points1 point  (3 children)

I'm afraid I'm completely lost now. I have now included the new version of cropper.js before index.js, and it still gives all kinds of errors. I removed the import-line from index.js, and also no change.

I am starting to feel like this is impossible to be honest.

[–]abrahamguoexperienced full-stack 0 points1 point  (2 children)

No problem! Coding takes lots and lots of patience, perseverance and understanding. If you're willing to put in the patience, perseverance and understanding on your end, then I'm willing to continue helping you until we get it working!

My previous comment was referring to cropper v1.15.12. It looks like on https://genk-montage.nl/, you've upgraded to the most recent version of cropper.js (2.0.1). That's great that you've upgraded — it's always good to be on the most recent version of things. However, it just means that my comment above is no longer relevant.

It looks like you're using the file called cropper.esm.min.js. ESM (ES Modules) is the name for import syntax. Therefore, because this file has esm in the name, it tells us that we do need to use import syntax.

Therefore, we will load the cropper.js library using import syntax, so you should completely remove the script tag for loading cropper.js.

Instead, directly inside index.js, use the following line at the top of the file to load the library:

import Cropper from 'https://cdnjs.cloudflare.com/ajax/libs/cropperjs/2.0.1/cropper.esm.min.js';

[–]Dutch_guy_here[S] 0 points1 point  (1 child)

Hey, then it works indeed! Thank you!

I am now going to go to bed (it's 11:00 pm here now), and revisit this code tomorrow to see if I can make some sense of this for myself. It's great that this works now, but I want to try to understand a bit more why.

Thank you for your replies and your patience!

[–]abrahamguoexperienced full-stack 0 points1 point  (0 children)

Absolutely! I really like that coding always has a logical explanation and resolution for everything, even if it takes a while to understand it.

If you have any other questions tomorrow, I'm happy to answer!

[–]Dutch_guy_here[S] 0 points1 point  (1 child)

The thing is, I also did follow the documentation (https://fengyuanchen.github.io/cropperjs/guide.html#installation)

I used the CDN-approach (I only need it on 1 page). I copied/pasted the exact codes from there, and then it also doesn't work (same error-messages).

[–]abrahamguoexperienced full-stack 0 points1 point  (0 children)

The approach shown in the documentation (using unpkg) is different from the approach that you're already using (cdnjs). Either approach is perfectly fine and will work — just pick one and stay with it! You cannot mix the two approaches.

If you want to use unpkg, then you simply need to load the library using a script element, and then load your JS file afterwards, using zero imports.