Conflict in loading the module when using mixin

Question

I'm using two custom modules which extend the same shipping.js using mixin. The problem is, if I disable one module then the another module is working and vice versa. Even, I tried setting up the dependence in module.xml it didn't solve my problem.

Below module is to move billing address to step 1,

<?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="Module_One" setup_version="2.0.0">
        <sequence>
            <module name="Module_Two"/>
        </sequence>
    </module>
</config>

And the layoutprocessor is,

public function aroundProcess(
        \Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
        Closure $proceed,
        array $jsLayout
    )

shipping-mixin.js file is

define([
    'jquery',
    'underscore',
    'Magento_Ui/js/form/form',
    'ko',
    'Magento_Customer/js/model/customer',
    'Magento_Customer/js/model/address-list',
    'Magento_Checkout/js/model/address-converter',
    'Magento_Checkout/js/model/quote',
    'Magento_Checkout/js/action/create-shipping-address',
    'Magento_Checkout/js/action/select-shipping-address',
    'Magento_Checkout/js/action/create-billing-address',
    'Magento_Checkout/js/action/select-billing-address',
    'Magento_Checkout/js/action/set-shipping-information',
    'Magento_Checkout/js/model/step-navigator',
    'Magento_Checkout/js/checkout-data'
], function(
    $,
    _,
    Component,
    ko,
    customer,
    addressList,
    addressConverter,
    quote,
    createShippingAddress,
    selectShippingAddress,
    createBillingAddress,
    selectBillingAddress,
    setShippingInformationAction,
    stepNavigator,
    checkoutData
) {
    'use strict';

    return function (target) {
        return target.extend({
            defaults: {
                template: 'Module_One/address'
            },
            setShippingInformation: function () {
                if (this.validateShippingInformation() && this.validateBillingInformation()) {
                    setShippingInformationAction().done(
                        function () {
                            setTimeout(function () {
                                if ($("button.action.primary.checkout").length) {
                                    $("#co-payment-form").find(".action.primary.checkout").trigger("click");
                                    return false;
                                }
                            }, 1000);
                        }
                    );
                }
            },
            validateBillingInformation: function() {

                if($('[name="billing-address-same-as-shipping"]').is(":checked")) {
                    if (this.isFormInline) {
                        var shippingAddress = quote.shippingAddress();
                        var addressData = addressConverter.formAddressDataToQuoteAddress(
                            this.source.get('shippingAddress')
                        );
                        //Copy form data to quote shipping address object
                        for (var field in addressData) {

                            if (addressData.hasOwnProperty(field) &&
                                shippingAddress.hasOwnProperty(field) &&
                                typeof addressData[field] != 'function' &&
                                _.isEqual(shippingAddress[field], addressData[field])
                            ) {
                                shippingAddress[field] = addressData[field];
                            } else if (typeof addressData[field] != 'function' &&
                                !_.isEqual(shippingAddress[field], addressData[field])) {
                                shippingAddress = addressData;
                                break;
                            }
                        }

                        if (customer.isLoggedIn()) {
                            shippingAddress.save_in_address_book = 1;
                        }
                        var newBillingAddress = createBillingAddress(shippingAddress);
                        selectBillingAddress(newBillingAddress);
                    } else {
                        selectBillingAddress(quote.shippingAddress());
                    }

                    return true;
                }

                var selectedAddress = $('[name="billing_address_id"]').val();
                if(selectedAddress) {
                    var res = addressList.some(function (addressFromList) {
                        if (selectedAddress == addressFromList.customerAddressId) {
                            selectBillingAddress(addressFromList);
                            return true;
                        }
                        return false;
                    });

                    return res;
                }

                this.source.set('params.invalid', false);
                this.source.trigger('billingAddress.data.validate');

                if (this.source.get('params.invalid')) {
                    return false;
                }

                var addressData = this.source.get('billingAddress'),
                    newBillingAddress;

                if ($('#billing-save-in-address-book').is(":checked")) {
                    addressData.save_in_address_book = 1;
                }

                newBillingAddress = createBillingAddress(addressData);
                selectBillingAddress(newBillingAddress);

                return true;
            }
        });
    }
});

And this module is to add custom form at checkout page and the module xml file is,

<?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="Module_Two" setup_version="1.0.0">
        <sequence>
            <module name="Magento_Checkout"/>
            <module name="Magento_Sales"/>
        </sequence>
    </module>
</config>

and the layoutProcessor is,

public function afterProcess(
        \Magento\Checkout\Block\Checkout\LayoutProcessor $subject,
        array $jsLayout
    )

And this module shipping-mixin.js file is,

define([
    'jquery',
    'underscore',
    'Magento_Ui/js/form/form',
    'ko',
    'Magento_Customer/js/model/customer',
    'Magento_Customer/js/model/address-list',
    'Magento_Checkout/js/model/address-converter',
    'Magento_Checkout/js/model/quote',
    'Magento_Checkout/js/action/create-shipping-address',
    'Magento_Checkout/js/action/select-shipping-address',
    'Magento_Checkout/js/model/shipping-rates-validator',
    'Magento_Checkout/js/model/shipping-address/form-popup-state',
    'Magento_Checkout/js/model/shipping-service',
    'Magento_Checkout/js/action/select-shipping-method',
    'Magento_Checkout/js/model/shipping-rate-registry',
    'Magento_Checkout/js/action/set-shipping-information',
    'Magento_Checkout/js/model/step-navigator',
    'Magento_Ui/js/modal/modal',
    'Magento_Checkout/js/model/checkout-data-resolver',
    'Magento_Checkout/js/checkout-data',
    'uiRegistry',
    'mage/translate',
    'Magento_Checkout/js/model/shipping-rate-service'
], function (
    $,
    _,
    Component,
    ko,
    customer,
    addressList,
    addressConverter,
    quote,
    createShippingAddress,
    selectShippingAddress,
    shippingRatesValidator,
    formPopUpState,
    shippingService,
    selectShippingMethodAction,
    rateRegistry,
    setShippingInformationAction,
    stepNavigator,
    modal,
    checkoutDataResolver,
    checkoutData,
    registry,
    $t
) {
    'use strict';

    var mixin = {

        defaults: {
            template: 'Module_Two/shipping'
        }
    };

    return function (target) {
        return target.extend(mixin);
    };
});

What I'm missing here, How can I resolve this problem. Thanks is advance.

Answer 1

As i am seen the Module_Two code you used shipping-mixin.js file to just change the template. and you also added Module_Two dependency in Module_One FYI :

  <module name="Module_One" setup_version="2.0.0">
    <sequence>
        <module name="Module_Two"/>
    </sequence>
</module>

so now this is clear the Module_Two always load first then Module_One and so now the copy Module_Two/shipping template into Module_One/address template changed section, assuming only custom code change only copy.

so Module_One/address template will have Module_One + Module_Two custom html code

Save it

Deploy the template (delete Module_One/address.html template form pub/static/frontend/... )

$php bin/magento setup:static-content:deploy -f 

(Note : -f assuming we are working developer mode)

and flush the cache for safely :)

$php bin/magento c:f

then reload the checkout page hope Module_One and Module_Two html code will render together, as you expecting.

---

And Additional to (optional) if we have controller over future upgrade of Module_Two

then Performance Point of view delete Module_Two -> shipping-mixin.js (not required), shipping.html (code already copied to module one) and

requirejs-config.js : delete mixin code of shipping-mixin example reference.

mixins: {
         'Magento_Checkout/js/view/shipping': {
             'Module_Two/js/shipping-mixin': true
         },  
         ...
}

why remove or delete because to avoid a network request (js and template) :)

Hope this will help to solve your concern.

let us know or share detail, if any further help required.