J-I-C | Javascript Image Compressor using HTML5 Canvas & File API | Image Editing library

I have rudimentary experience with JavaScript, centered around predominantly using JQuery.

In a Django project I'm building, I typically import my JQuery code into a Django template like so: .

Now I need to use a JS library that's installed via npm. Specifically this one: github.com/brunobar79/J-I-C. It's job is to compress user uploaded on the client-side before uploading them to the server. E.g. I can do target_img.src = jic.compress(source_img,quality,output_format).src;.

But how would I call this compress method in my template?

As in, where/how do I import it? Should I dump all the library's code in a separate file and import it via ?

If I were to do that, then why install the library via npm at all?

Like I said, my knowledge in this domain is rudimentary. Would be great to get an illustrative example that clears my concept.

I am trying to use material-ui for a project. It throws the following error when using it:

I have tried going through the github repository for similar issues without any luck. Anyone has any ideas what might be the issue? I am adding the package.json file just in case its any of the dependencies screwing up.

package.json