Magento 2 - Override Mixin with another Mixin

Question

The module Amasty_HidePrice overrides mage/validation by using a mixin. But this mixin has a bug and I need to fix it by overriding the mixin with my own mixin.

This is the original mixin (shortened to only show relevant parts):

vendor\amasty\module-hide-price\view\frontend\requirejs-config.js:

var config = {
    config: {
        mixins: {
            'mage/validation': {
                'Amasty_HidePrice/js/validation-mixin': true
            }
        }
    }
};

---

I tried to override it like this:

app\code\Company\Newsletter2Go\view\frontend\requirejs-config.js

var config = {
    config: {
        mixins: {
            'mage/validation': {
                'Company_Newsletter2Go/js/validation-mixin': true,
            }
        }
    }
};

app\code\Company\Newsletter2Go\etc\module.xml

<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Company_Newsletter2Go" setup_version="1.0.0">
        <sequence>
            <module name="Amasty_HidePrice"/>
        </sequence>
    </module>
</config>

Now I added console.log("original mixin"); to the original mixin and console.log("custom mixin") to my override.

But it shows both, and the override does not work, the old code is still used.

original mixin
custom mixin

---

I also tried to use map, but it still loads the original method:

var config = {
    config: {
        map: {
            "*": {
                "Amasty_HidePrice/js/validation-mixin": "Company_Newsletter2Go/js/validation-mixin"
            }
        }
    }
};

---

I even tried to override it, by putting the script into my theme folder at THEME/Amasty_HidePrice/web/js/validation-mixin.js but it does still load the original file.

---

---

---

---

Current State:

app\code\Company\Newsletter2Go\etc\module.xml

<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Company_Newsletter2Go" setup_version="1.0.0">
        <sequence>
            <module name="Company_Base"/>
            <module name="Magento_Newsletter"/>
            <module name="Magento_Customer"/>
            <module name="Amasty_HidePrice"/>
        </sequence>
    </module>
</config>

app\code\Company\Newsletter2Go\view\frontend\requirejs-config.js

var config = {
    config: {
        mixins: {
            'mage/validation': {
                'Amasty_HidePrice/js/validation-mixin': false,
                'Company_Newsletter2Go/js/validation-mixin': true,
            }
        }
    }
};

app\code\Company\Newsletter2Go\view\frontend\web\js\validation-mixin.js

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

    return function (widget) {
        $.widget('mage.validation', widget, {
            listenFormValidateHandler: function (event, validation) {

                console.log("override loaded");

                // I removed the rest of the code, for easier debugging
            }
        });
        return $.mage.validation;
    };
});

vendor\amasty\module-hide-price\view\frontend\web\js\validation-mixin.js

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

    return function (widget) {
        $.widget('mage.validation', widget, {
            listenFormValidateHandler: function (event, validation) {

                console.log("original loaded");

                // I removed the rest of the code, for easier debugging
            }
        });
        return $.mage.validation;
    };
});

vendor\amasty\module-hide-price\view\frontend\requirejs-config.js

var config = {
    map: {
        '*': {
            'amasty-fancyambox' : 'Amasty_HidePrice/js/fancyambox/jquery.fancyambox.min'
        }
    },
    config: {
        mixins: {
            'mage/validation': {
                'Amasty_HidePrice/js/validation-mixin': true
            },
            'Magento_Swatches/js/swatch-renderer': {
                'Amasty_HidePrice/js/swatch-renderer-mixin': true
            }
        }
    }
};

---

Result

Uncaught TypeError: base is not a constructor
    at Function.$.widget (widget.js:75)
    at validation-mixin.js:5
    at mixins.js:105
    at Array.forEach (<anonymous>)
    at applyMixins (mixins.js:104)
    at mixins.js:129
    at Object.execCb (require.js:1650)
    at Module.check (require.js:866)
    at Module.<anonymous> (require.js:1113)
    at require.js:132

---

More Informations about the solution:

Answer 1

You can disable original mixin and enable yours by putting this snippet in your module's requirejs config:

var config = {
    config: {
        mixins: {
            'mage/validation': {
                'Amasty_HidePrice/js/validation-mixin': false,
                'YourVendor_YourModule/js/validation-mixin': true
            }
        }
    }
};

You have to also add this Amasty module as yours module dependency (sequence tag in etc/module.xml).

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="YourVendor_YourModule">
        <sequence>
            <module name="Amasty_HidePrice"/>
        </sequence>
    </module>
</config>

BTW. requirejs config is cached. After making changes to your requirejs config you need to clean pub/static/frontend/yourvendor/yourtheme folder.

Edit: After long analysis with @Black it turned out that there was an additional issue with 3rd party module, in which the mixin for the same file was created but incorrectly (ie. they forgot to return $.mage.validation - so all other mixins couldn't work).

Answer 2

I was able to solve it thanks to @Michał Biarda.

There was a bug in the extension Dotdigitalgroup_Sms, they forgot to return $.mage.validation.

So I have overriden it by mapping and fixed it.

---

But there is a much better solution:

The best way is to just use mapping and remap the mixin from Amasty to my own script. I even tried this at the beginning, but I made a mistake:

app\code\Company\Newsletter2Go\view\frontend\requirejs-config.js:

Wrong:

var config = {
    config: {
        map: {
            "*": {
                "Amasty_HidePrice/js/validation-mixin": "Company_Newsletter2Go/js/validation-mixin"
            }
        }
    }
};

Correct:

var config = {
    map: {
        "*": {
            "Amasty_HidePrice/js/validation-mixin": "Company_Newsletter2Go/js/validation-mixin"
        }
    }
};

Answer 3

You can try override it like this, (not tested)

var config = {
    config: {
        mixins: {
            'Amasty_HidePrice/js/validation-mixin': {
                'Company_Newsletter2Go/js/validation-mixin': true,
            }
        }
    }
};