Magento 2 - advanced JS bundling mixins

Question

I followed this answer to enable JS bundling with success - Magento 2 Advanced Js Bundling. However when I go to checkout, I get JS errors in console. When in developer mode everything is ok. Even in production mode without the bundling.

The error is

Uncaught TypeError: quote.getDeliveryBranchId is not a function

I have a custom component in my module js/view/checkout/shipping/form.js with this code snippet

define([
    'jquery',
    'ko',
    'uiComponent',
    'Magento_Checkout/js/model/quote',
    'Magento_Checkout/js/model/shipping-service',
    'mage/translate',
    'Magento_Checkout/js/model/shipping-rate-registry'
], function ($, ko, Component, quote, shippingService, t, rateRegistry) {
    initObservable: function () {
        this.selectedId = ko.computed(function() {
                return quote.getDeliveryBranchId();
            }, this);
    }
})

and quote-mixin in the same module js/model/quote-mixin.js with this snippet

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

    return function (source) {

        source.isPackstation = ko.observable(false);

        source.getDeliveryBranchId = function()
        {
            if(typeof window.checkoutConfig.quoteData.extension_attributes.delivery_branch_id !== 'undefined') {
                return window.checkoutConfig.quoteData.extension_attributes.delivery_branch_id;
            }
            return '';
        };
        return source;
    };
});

In both of the files, there are more methods, but I included only these important ones.

In build.js under bundles/shared I have these 3 lines of dependencies

"[AnotherMyModule]/js/model/quote-mixin",
"Magento_Checkout/js/model/quote",
"[MyModule_with_code_sample_above]/js/model/quote-mixin",

Content of this build.js was autogenerated using m2-devtools and I just copied it.

I can see all the files in the chrome dev tool in the sources section. Also, I can see the content of all those mixins in shared.js. However if I set up a breakpoint in those files they seem not to be called at all, while other mixins (like billing-address) are called when I set up a breakpoint.

My question is. Is there any particular order these mixins have to be included in the build.js or can someone point me (explain to me how the bundling works) to the solution?

EDIT After some javascript debugging it seems to be the problem of javascript loading order. First Magento loads require.js, then shared.js, checkout-index-index.js and mixins.js. Mixins.js is the reason why when using define() it ends up using the function in require.js (because mixin.js is not loaded yet).

So my question is. How do I tell magento to change the order of javascript loading? I want it to be

require.js, mixins.js, (maybe requirejs-config.js here), shared.js, checkout-index-index.js, any other javascript

I noticed that in developer mode (where there are no bundles), the order is

require.js, mixins.js, requirejs-config.js

EDIT2 I managed to change the order of the javascript files, but it wasn't the case. The problem is that mixin module is not fully required in the browser when all the other modules (in shared.js) are being defined and therefore it uses the define method in require.js instead of the redefined method in mixins.js.

When I set up some breakpoints in require.js, everything was ok, because until the execution went all the way to quote-mixin, the original mixin.js was fully required.

So now the question is how to force browser to fully load mixin.js before defining other modules?

Something like

define('quote-mixin', ['mixins', 'other-dependency'], function(mixins, otherDependency) {
...
})

Whoever answers this question, is my hero.

Answer 1

I ran into the same problem. There is a patch to solve it. You can find out more here: https://github.com/magento/magento2/pull/25587

Download the mixins.js file from here: https://raw.githubusercontent.com/magento/magento2/8eb66b564753fd3fab258189a368c05d771eb2a7/lib/web/mage/requirejs/mixins.js

Then upload it in your theme: app/design/frontend/THEME_VENDOR/THEME_NAME/web/mage/requirejs/mixins.js