<sequence> not working?

Question

I've made a script in a custom module that is dependent on customer-data.js, a .js file initiated by Magento_Customer.

So, what I did in my module.xml:

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Vendor_AjaxCart" setup_version="2.0.0">
        <sequence>
            <module name="Magento_Customer" />
        </sequence>
    </module>
</config>

But still, my .js file which runs in the custom module gets loaded before the customer-data.js.

The only way I can get everything working is using a time out like this:

<script>
    setTimeout(function() {
        require([
            'Vendor_AjaxCart/js/cartAjaxQty'
        ]);
    }, 5000);
</script>

which makes sure it gets loaded AFTER customer-data.js.

Is there another way to fix this?

When I look at app/etc/config.php, my module should be instantiated AFTER Magento_Customer.

I tried doing the following in the .phtml:

<script>
    require ([
            'jquery'
        ],
    function ($) {
        $(document).ready(function () {
            require([
                'Vendor_AjaxCart/js/cartAjaxQty'
            ]);
        });
    });
</script>

But unfortunately no luck either. STILL the file gets loaded before customer-data.js

-- For anyone wanting to see the source code --

Ajax Cart M2

Answer 1

You do not need to apply sequence for loading js in order, require js is for the same thing.

You should just mention the Magento_Customer/js/customer-data before your js as follows;

<script>
         require(['jquery',
           'Magento_Customer/js/customer-data',
            'Vendor_AjaxCart/js/cartAjaxQty'],
            function($,customerData,cartAjaxQty) {

              //your code here

            });
</script>

EDIT:

In your Vendor_AjaxCart/js/cartAjaxQty.js file encapsulate your code in following require block.

require(['jquery',
           'Magento_Customer/js/customer-data'],
            function($,customerData) {

              //your Vendor_AjaxCart/js/cartAjaxQty.js code here

            });

Answer 2

I fixed it, see this other question of mine:

Dependecy error bug? Magento 2.2.3

I posted my answer here.

Short said, I fixed it by including a $(window).on("load", function () (instead of $(document).ready(function(){ ) in in the .phtml-file:

<script>
require ([
        'jquery'
    ],
function ($) {
    $(window).on("load", function () {
        require([
            'Buro210_AjaxCart/js/cartAjaxQty'
        ]);
    });
});

And now all loads fine. It's not the fix I had hoped for, a more cleaner approach would've been my preference but it fixes my error.

Answer 3

customer-data.js is added through layout in Module\Customer\view\frontend\layout\default.xml:

<referenceContainer name="content">            
    <block name="customer.customer.data"
           class="Magento\Customer\Block\CustomerData"
           template="Magento_Customer::js/customer-data.phtml"/>
</referenceContainer>

If your phtml file is loaded before this you can't depend on customer-data.js, even if your <sequence> states that your module should be loaded after Magento_Customer.

Have you tried moving your block to be placed after customer.customer.data?

<referenceContainer name="content">            
    <block name="vendor.ajaxcart"
           class="Vendor\AjaxCart\Block\MyBlockName"
           template="Vendor_AjaxCart::js/cartajaxqty.phtml" after="customer.customer.data"/>
</referenceContainer>