I have a custom slide out customer menu and part of it seems like it’s losing it’s knockoutjs context and not working. I’m working on updating my store from Magento 2.4.6 -> 2.4.8. The code works just fine in Magento 2.4.6, but it’s breaking on 2.4.8. Here’s my code in Magento_Customer/templates/account/customer.phtml
<li class="customer-welcome">
<span class="customer-name"
role="link"
tabindex="0"
data-mage-init='{"dropdown":{}}'
data-toggle="dropdown"
data-trigger-keypress-button="true"
data-bind="scope: 'customer'">
<button type="button"
class="action switch customer-menu-button"
tabindex="-1"
data-action="customer-menu-toggle">
<span class="greet welcome">
<!-- ko if: customer().fullname -->
<span class="logged-in"
data-bind="text: new String('<?= $escaper->escapeHtml(__('Hi, %1', '%1')) ?>').replace('%1', customer().firstname)">
</span>
<!-- /ko -->
<!-- ko ifnot: customer().fullname -->
<span class="not-logged-in"
data-bind="text: '<?= $escaper->escapeHtml(__('Sign In')) ?>'"></span>
<!-- /ko -->
</span>
</button>
</span>
<script type="text/x-magento-init">
{
"*": {
"Magento_Ui/js/core/app": {
"components": {
"customer": {
"component": "Magento_Customer/js/view/customer"
}
}
}
}
}
When I load up my homepage, I can see the element says “Sign In” like it’s supposed to for a brief moment before it disappears. If I highlight any of the elements under the .greet.welcome span and run require('ko').contextFor($0) in the dev console, I get undefined. On my production site, that same command actually returns a knockout context object.
I’ve got the Knockoutjs context debugger extension in Chrome and when I inspect any of the knockout lines, it shows an error saying “Cannot convert undefined or null to object”. On my production site, it shows just an empty object. It makes me think that something with the customerData object is updating/refreshing after page load, or trying to, and breaking and since my code is subscribed to that object, it breaks too.
The last thing I discovered trying to debug this is that it appears to only be happening on my homepage and on category pages. It’s working just fine on CMS pages, product pages, and non-cached pages like customer/account/login or /checkout/cart.
Any ideas what else I can look for and/or debug? I’m not getting any errors in the dev console and I’m not getting any errors in the logs on my dev server either.