Skip to content

Magento 2 mixin file not calling for this target file “Magento_ConfigurableProduct/js/configurable” why?

I am planning to write a mixin for configurable product varient selection stock and qty update in pdp.
This is my requirejs-config.js file:app/code/Vendor/Module/view/frontend/requirejs-config.js with this code:

var config = {
config: {
    mixins: {
        'Magento_ConfigurableProduct/js/configurable': {
            'Vendor_Module/js/configurable-item-mixin': true,
        },
    },
},};

This is my mixin file: app/code/Vendor/Module/view/frontend/web/js/configurable-item-mixin.js with this code:

define(['jquery'], function ($) {
'use strict';

return function (Configurable) {
    return Configurable.extend({
       console.log("hello);
    });
 } });

The console statement is not logging in browser dev tools. My main concern is this mixin file not calling. If I change this target class: Magento_ConfigurableProduct/js/configurable to something else like swatch-renderer then my mixin file is calling. But I want to extend the configurable js file for my requirement. How can I achieve this ?