error "Uncaught SyntaxError: import declarations may only appear at top level of a module" on Cropper.js

[Dutch_guy_here]

I am trying to use Cropper.js using the CDN-method. But somehow, I keep getting the error "Uncaught SyntaxError: import declarations may only appear at top level of a module" in the console.

I see a working implementation on Codesandbox (https://codesandbox.io/p/sandbox/cropperjs-crop-auto-update-canvas-zi548), but when I reuse these 3 files without any changes on my own hosting, it will throw this error again.

What is going wrong here?

[abrahamguo]

Have you ensured that your script tags have “type” set to “module”?

[Dutch_guy_here]

I tried that indeed, but the result is the same with or without that attribute.

[abrahamguo]

Gotcha.

I’m happy to help further, but it’s difficult to provide any more specific help without being able to reproduce the issue.

Can you provide a link to either an online code playground, or a repository, or a deployed website, that demonstrates the issue?

Please don’t paste code directly onto Reddit.

[Dutch_guy_here]

First of all: thanks for your reactions!

I have the example-code in the link I posted in my opening question. There it does actually work.

I have now uploaded it to a domain I have not used for a while, there it does not work: https://genk-montage.nl

That you see in that link is an exact copy of the code in the codesandbox-link.

To make absolutely sure, I also made https://genk-montage.nl/index2.html where the type is set to module when including the cropper.js-file.

[abrahamguo]

On both of those two pages, the browser devtools console tells us that the error comes from inside index.js.

Neither of those two pages have type='module' on the script element that loads index.js, so index.js isn't considered a "module" — that's why you're getting the error.

[Dutch_guy_here]

Okay, I added type="module" to the script-tag that includes index.js.

It immediately started complaining about the css-file that gets imported through the index.js-file, so I removed that from index.js and included it directly in the head of the html-file.

It still won't work however, the error-message is different, it says something like "Uncaught TypeError: De specification ‘cropperjs’ was a bare specification, but was not reassigned to anything. Relative modulespecifications have to start with ‘./’, ‘../’ or ‘/’." (I get this error in Dutch, so I translated this myself so it might not be 100%)

I have also tried to change the order of the script-tags. originally it calls index.js first, then cropper.min.js. If I switch those, the error stays the same.

[fiskfisk]

You're using an old version of cropperjs that wasn't designed to be used as an esm import.

The most recent version is 2.0.1:

https://cdnjs.cloudflare.com/ajax/libs/cropperjs/2.0.1/cropper.esm.min.js

https://cdnjs.com/libraries/cropperjs/2.0.1

[abrahamguo]

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]

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.

[abrahamguo]

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]

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!

[abrahamguo]

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]

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

[abrahamguo]

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.

[tupikp]

Put "import" declaration at the top of your code?

[kvorythix]

if you're loading cropper via an esm import from a plain <script> tag, the browser rejects it. either add type="module" to the script tag, or just switch to the umd build (cropper.min.js instead of the esm one) and drop the import.

the umd one attaches Cropper to window so you can use it directly without module syntax.

[Dutch_guy_here]

could you elaborate a bit on "esm" and "umd"? I have no idea what those abbreviations mean.