Q:

Magento 2 error in swatchRenderer.js at 'updateData' property

I have this error in category page. When i change color from swatch option it star loading in product image container and shows error in SwatchRenderer.js
here is the error:
Uncaught TypeError: Cannot read property 'updateData' of undefined
at $.(anonymous function).(anonymous function).processUpdateBaseImage (http://127.0.0.1/magentoblank/pub/static/version1515737320/frontend/jtuser/customtheme/en_US/Magento_Swatches/js/swatch-renderer.js:1168:25)
at $.(anonymous function).(anonymous function).processUpdateBaseImage (http://127.0.0.1/magentoblank/pub/static/version1515737320/frontend/jtuser/customtheme/en_US/jquery/jquery-ui.js:402:25)
at $.(anonymous function).(anonymous function).updateBaseImage (http://127.0.0.1/magentoblank/pub/static/version1515737320/frontend/jtuser/customtheme/en_US/Magento_Swatches/js/swatch-renderer.js:1137:22)
at $.(anonymous function).(anonymous function).updateBaseImage (http://127.0.0.1/magentoblank/pub/static/version1515737320/frontend/jtuser/customtheme/en_US/jquery/jquery-ui.js:402:25)
at $.(anonymous function).(anonymous function)._ProductMediaCallback (http://127.0.0.1/magentoblank/pub/static/version1515737320/frontend/jtuser/customtheme/en_US/Magento_Swatches/js/swatch-renderer.js:1103:18)
at $.(anonymous function).(anonymous function)._ProductMediaCallback (http://127.0.0.1/magentoblank/pub/static/version1515737320/frontend/jtuser/customtheme/en_US/jquery/jquery-ui.js:402:25)
at Object.mediaSuccessCallback [as success] (http://127.0.0.1/magentoblank/pub/static/version1515737320/frontend/jtuser/customtheme/en_US/Magento_Swatches/js/swatch-renderer.js:981:29)
at i (https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js:2:27449)
at Object.fireWith [as resolveWith] (https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js:2:28213)
at y (https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js:4:22721)

i am using custom jquery.min file and created one custom slider with sly.js hope it will help you to understand my issue well.
TIA

A:

As I can't replicate this issue it's hard for me to say what the issue is exactly but following the code from the error it seems to be when $('[data-gallery-role=gallery-placeholder]').data('gallery') is undefined. The cause of this is likely to be a class or data attribute being removed/changed.
To confirm this is the case when you replicate the problem paste this into your console:
console.log(jQuery('[data-gallery-role=gallery-placeholder]').data('gallery'));

This is how the console log looks for me:

If undefined is returned then this is your problem.
Debugging
To resolve this the first thing I'd do is check the following elements/selectors exist in the DOM. If they do not exist try finding where they are in the core and adding them back.

[data-gallery-role=gallery-placeholder]
.column.main
.product-item-info

I say this as following the code back from this error leads me to the following:

gallery.updateData(imagesToUpdate);
mediaGallerySelector: '[data-gallery-role=gallery-placeholder]'
this.updateBaseImage(images, $main, isProductViewExist);
$main = isProductViewExist ? $this.parents('.column.main') : $this.parents('.product-item-info')

Another option could be that data('gallery') isn't being set, if that's the case the issue could be anything.
Notes
It will help if you could include the version of Magento you are working on, and any customisations you have done around swatches and/or the gallery DOM and/or JS.
A quick way to debug this could be to revert all the changes you've made to swatches/gallery and see if it works, if it does add the files back one by one until you find the one that caused the problem. Then run a diff on that file and go from there.

A:

We had this same issue until we realized we were hiding the price of products on our category listing page. Apparently, swatch-renderer.js relies on classes on the price box to determine if it is on the product view or product listing page. After re-enabling the price box, color swatch switching started working again.

A:

I found a pretty efficient way to fix this:
Copy the /vendor/magento/module-swatches/view/frontend/web/js/swatch-renderer.js-file to app/design/YourName/YourTheme/Magento_Swatches/web/js/swatch-renderer.js and replace the updateBaseImage() (line ~1152) with the following:
updateBaseImage: function (images, context, isInProductView, eventName) {
    var gallery = context.find(this.options.mediaGallerySelector).data('gallery');

    if (eventName === undefined && gallery !== undefined) {
        this.processUpdateBaseImage(images, context, isInProductView, gallery);
    } else {
        context.find(this.options.mediaGallerySelector).on('gallery:loaded', function (loadedGallery) {
            loadedGallery = context.find(this.options.mediaGallerySelector).data('gallery');
            this.processUpdateBaseImage(images, context, isInProductView, loadedGallery);
        }.bind(this));
    }
},

You can also override the file using a module, but I found this to be the easiest way. There's plenty of information readily available to override a JS-component using a module.
It's weird that they define gallery and just assume it'll be defined afterwards. Adding a check for this fixes everything.
It works perfect! I just hope that the Magento Dev's pick up on this and implement this in the core-code.

