Magento 2: How do I rewrite JS from Third Party loaded through requirejs-config.js

Question

Lets say we have an Third Party Module in Magento 2 that has in frontend from requirejs-config.js the following code:

var config = {
map: {
    '*': {
        amShopbyFilterAbstract: 'Amasty_Shopby/js/amShopby',
        amShopbyFilterItemDefault: 'Amasty_Shopby/js/amShopby',
        amShopbyFilterDropdown: 'Amasty_Shopby/js/amShopby',
        amShopbyFilterSlider: 'Amasty_Shopby/js/amShopby',
        amShopbyFilterFromTo: 'Amasty_Shopby/js/amShopby',
        amShopbyAjax: 'Amasty_Shopby/js/amShopbyAjax',
        amShopbyFilterSearch: 'Amasty_Shopby/js/amShopby',
        amShopbyFilterHideMoreOptions: 'Amasty_Shopby/js/amShopby',
        amShopbyFilterAddTooltip: 'Amasty_Shopby/js/amShopby',
        amShopbySwatchesChoose: 'Amasty_Shopby/js/amShopbySwatchesChoose',
        amShopbyFilterMultiselect: 'Amasty_Shopby/js/amShopby',
        amShopbyFilterSwatch: 'Amasty_Shopby/js/amShopby',
        amShopbyFiltersSync: 'Amasty_Shopby/js/amShopbyFiltersSync',
        amShopbyApplyFilters: 'Amasty_Shopby/js/amShopbyApplyFilters',
        amShopbyTopFilters: 'Amasty_Shopby/js/amShopbyTopFilters',
        amShopbyFilterCategoryDropdown: 'Amasty_Shopby/js/amShopby',
        amShopbyFilterCategoryLabelsFolding: 'Amasty_Shopby/js/amShopby',
        amShopbyFilterContainer: 'Amasty_Shopby/js/amShopby'
    }
},
deps: [
    'Amasty_Shopby/js/amShopbyResponsive'
]

};

And I want to use my own code in order to overwrite the js from 'Amasty_Shopby/js/amShopby' so it loads my own code instead of the extension code in order for me to make changes into it.

Answer 1

So in order for me to do that I had to build a module following the structure:

app/code/MageCheck/Shopby/composer.json

{
    "name": "magecheck/shopby",
    "description": "MageCheck_Shopby rewrite to Amasty_Shopby",
    "require": {
        "php": "~5.6.5|7.0.2|7.0.4|~7.0.6"
    },
    "type": "magento2-module",
    "version": "1.0.0",
    "license": [
        "Non-Commercial"
    ],
    "autoload": {
        "files": [
            "registration.php"
        ],
        "psr-4": {
            "MageCheck\\Shopby\\": ""
        }
    }
}

app/code/MageCheck/Shopby/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="MageCheck_Shopby" setup_version="1.0.0">
        <sequence>
            <module name="Amasty_Shopby" />
        </sequence>
    </module>
</config>

The above code makes sure that the extension loads after the module we want to extend, in this case Amasty_Shopby.

app/code/MageCheck/Shopby/registration.php

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE, 
    'MageCheck_Shopby',
    __DIR__
);

app/code/MageCheck/Shopby/view/frontend/requirejs-config.js

var config = {
    map: {
        '*': {
            amShopbyFilterAbstract: 'MageCheck_Shopby/js/amShopby',
            amShopbyFilterItemDefault: 'MageCheck_Shopby/js/amShopby',
            amShopbyFilterDropdown: 'MageCheck_Shopby/js/amShopby',
            amShopbyFilterSlider: 'MageCheck_Shopby/js/amShopby',
            amShopbyFilterFromTo: 'MageCheck_Shopby/js/amShopby',
            amShopbyFilterSearch: 'MageCheck_Shopby/js/amShopby',
            amShopbyFilterHideMoreOptions: 'MageCheck_Shopby/js/amShopby',
            amShopbyFilterAddTooltip: 'MageCheck_Shopby/js/amShopby',
            amShopbyFilterMultiselect: 'MageCheck_Shopby/js/amShopby',
            amShopbyFilterSwatch: 'MageCheck_Shopby/js/amShopby',
            amShopbyFilterCategoryDropdown: 'MageCheck_Shopby/js/amShopby',
            amShopbyFilterCategoryLabelsFolding: 'MageCheck_Shopby/js/amShopby',
            amShopbyFilterContainer: 'MageCheck_Shopby/js/amShopby'          
        }
    }
};

So the code above actually replaces the load for the former Amasty_Shopby/js/amShopby js with the new js on page load

the contents of amShopby.js is irrelevant so I did not add it.

Hope this helps somebody not struggle with this as I did!