0

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',
    });
});
  • I am trying to utilize the same plugin, in M2 2.3.4, and experiencing the same. I even can see the plugin is there when i console log 'croppie', after passing it in. which I advice you do anyway, ie changing function($), to function($, croppie), and then trying to instantiate croppie another way, but if / when I find out more i'll let you know. – Tobias Hagenbeek Jun 7 at 14:54
0

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.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.