Error while using croppie.js library in magento 2

Question

Trying to use the croppie library on product detail page and sometime it works perfectly but most of the time it throws one of these errors.

TypeError: priceBoxes.priceBox is not a function

Uncaught TypeError: $(...).croppie is not a function

Every time i open the product page first time in incognito or hard refreshes the page, it always works but when i refreshes the page, it throws these errors.

croppie js path in my theme:

app/design/frontend/Theme_Vendor/Theme/web/js/croppie.js

var config = {
 paths: {
     croppie: 'js/croppie'
 }
};

app/design/frontend/Theme_Vendor/Theme/Magento_Catalog/templates/product/view/gallery.phtml:

require([
    'jquery',
    'domReady!',
    'croppie'
], function($){
    $('.demo').croppie({
        url: 'demo/demo-1.jpg',
    });
});

Answer 1

The issue with this is related to jQuery and the order of loading. While I am yet to discover the "pretty" fix for this, I have found a workaround.

// Open croppie.js (Should have a local version), and you will see:
(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(factory);
    } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
        // CommonJS
        module.exports = factory();
    } else {
        // Browser globals
        root.Croppie = factory();
    }
}

Change this to

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(factory);
    } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
        // CommonJS
        module.exports = factory();
    } else {
        // Browser globals
        root.Croppie = factory();
    }
    window['Croppie'] = factory();
}

Please note the added line window['Croppie'] = factory(); Now, use the window loaded version, meaning no jQuery, like so:

var crop = new window['Croppie'](document.getElementById('MYCROPPIE'), {
    enableExif: true,
    viewport: {
        width: 500,
        height: 500
    }
});

Where I just gave an example of a few options, but from here you should be able to use all event and other needed parts, but please note, that you do also have to rewrite any existing event handling. For example previously I used:

crop.croppie('result', 'html').then(function(html) {}

Which now became:

crop.result('html').then(function(html) {}

But I have no more loading issues and it works 100% of the time.