0

After recently upgrading a magento 2 install from 2.3.3 to 2.4.5 I'm having problems with the minicart UI Component not rendering anything.

After some investigation, it appears that component is having problems loading the KO template - on the current version of the live site it's adding in HTML there, whereas the upgraded version on our staging environment and locally isn't.

After some investigation, I discovered a way to list the registered UI components, which gives this list on the live site (v2.3.3):

reg = requirejs('uiRegistry');
reg.get(function(item) { console.log(item.name); }); 

enter image description here

and this list on the staging site (2.4.5) registered ui components on staging

So it appears there are a series of UI Components that aren't being loaded into the UI Registry, which I suspect is why the minicart isn't working. But I can't seem to work out why the components wouldn't be loading. I've tried loading the vanilla theme, and disabling a series of custom modules but haven't had much success.

The following errors are listed in the log, but from what I've seen on other Stack Overflow posts, they are unrelated and shouldn't be causing anything to break.

[2022-09-22T12:19:02.722190+00:00] report.INFO: Broken reference: the 'catalog.compare.sidebar' element cannot be added as child to 'sidebar.additional', because the latter doesn't exist [] []
[2022-09-22T12:19:02.724166+00:00] report.INFO: Broken reference: the 'sale.reorder.sidebar' element cannot be added as child to 'sidebar.additional', because the latter doesn't exist [] []
[2022-09-22T12:19:02.724652+00:00] report.INFO: Broken reference: the 'wishlist_sidebar' element cannot be added as child to 'sidebar.additional', because the latter doesn't exist [] []
[2022-09-22T12:19:02.725313+00:00] report.INFO: Broken reference: the 'multiple-wishlist_sidebar' element cannot be added as child to 'sidebar.additional', because the latter doesn't exist [] []
[2022-09-22T12:19:02.725751+00:00] report.INFO: Broken reference: the 'custom_info.order.success' element cannot be added as child to 'order.success.additional.info', because the latter doesn't exist [] []
[2022-09-22T12:19:02.726535+00:00] report.INFO: Broken reference: the 'custom_info.order.success' tries to reorder itself towards '', but their parents are different: 'order.success.additional.info' and '' respectively. [] []

Is there a way to debug this any further? I'm all out of ideas.

2
  • Hi there , are you sure the deployment was good like setup:static-content:deploy command ? and also check the configurations like minification , bundling etc by comparing the configs of staging site and live site also , this was my best guess , if there is any console errors please do share it here.Thanks Sep 22, 2022 at 17:20
  • The staging site is hosted on the magento cloud, so the setup process was run via their deployment scripts which error on failure, so there's no issue there. The minicart.js files are loading into the dom too much like the live site, just not being called. Also, there are no console errors.
    – fin
    Sep 23, 2022 at 14:00

2 Answers 2

7

This turned out to be an extension (Scommerce AnalyticsSync) trying to require "jquery/jquery.cookie" in it's JavaScript in a file called "tracking.phtml", changing the dependency to "mage/cookie" fixed the issue.

3
  • Yes, this was an issue for me as well. However your comment is a bit wrong. Search for jquery/jquery.cookie and replace with mage/cookies. Thank you very much for your help and for posting your findings :)
    – Zankar
    Nov 16, 2022 at 10:31
  • Ahh yes, good spot - thanks!
    – fin
    Nov 22, 2022 at 12:00
  • worked for me, and lots of issues are fixed by this. Thanks.
    – Nitesh
    Dec 8, 2022 at 19:22
2

In the last weeks we have been locally migrating our Magento to 2.4.5

I had a similar issue in minicart and other ui component like shipping address on checkout page

In my case the problem was the short closure of the html tag. We changed all tags like

<div class="step-title" translate="'Shipping Address'" data-role="title" />

in

<div class="step-title" translate="'Shipping Address'" data-role="title"></div>

Sometimes even custom knockout tags had to be changend

            <each args="$parent.getRegion($parent.getItemRenderer(item.product_type))"
                  render="{name: getTemplate(), data: item, afterRender: function() {$parents[1].initSidebar()}}"
            />

in

            <each args="$parent.getRegion($parent.getItemRenderer(item.product_type))"
                  render="{name: getTemplate(), data: item, afterRender: function() {$parents[1].initSidebar()}}"
            ></each>

Hope this work!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.