Magento 2.4.4 Checkout Success Page JS Error

[jsamhall]

Following a successful checkout, a TypeError occurs which may break JS elsewhere on the page.

The TypeError is: Uncaught TypeError: Cannot read properites of undefined (reading 'remove')

This error is caused by a change in Magento's customer-data which takes storage out of the global namespace and instead initializes it via initStorage on customer-data.js

Bolt's Checkout success.phtml (https://github.com/BoltApp/bolt-magento2/blob/master/view/frontend/templates/checkout/success.phtml) fails to invoke initStorage:

<script>
    require([
        'Magento_Customer/js/customer-data'
    ], function (customerData) {
        var sections = ['cart'];
        customerData.invalidate(sections);
        customerData.reload(sections, true);
    });
</script>

When customerData.invalidate is invoked, storage has yet to be defined in customer-data.js. Part of invalidate method invokes buffer.remove, which in turn invokes storage.remove which raises the TypeError

Here is customer-data.js method invalidate

        /**
         * @param {Array} sectionNames
         */
        invalidate: function (sectionNames) {
            var sectionDataIds,
                sectionsNamesForInvalidation;

            sectionsNamesForInvalidation = _.contains(sectionNames, '*') ? sectionConfig.getSectionNames() :
                sectionNames;

            $(document).trigger('customer-data-invalidate', [sectionsNamesForInvalidation]);
            buffer.remove(sectionsNamesForInvalidation);
            sectionDataIds = $.cookieStorage.get('section_data_ids') || {};

            // Invalidate section in cookie (increase version of section with 1000)
            _.each(sectionsNamesForInvalidation, function (sectionName) {
                if (!sectionConfig.isClientSideSection(sectionName)) {
                    sectionDataIds[sectionName] += 1000;
                }
            });
            $.cookieStorage.set('section_data_ids', sectionDataIds);
        },

And buffer.remove:

        /**
         * @param {Object} sections
         */
        remove: function (sections) {
            _.each(sections, function (sectionName) {
                storage.remove(sectionName);

                if (!sectionConfig.isClientSideSection(sectionName)) {
                    storageInvalidation.set(sectionName, true);
                }
            });
        }

We have patched this locally by overriding Bolt's success.phtml and invoking customerData.initStorage() before invalidating data, as-so:

<script>
    require([
        'Magento_Customer/js/customer-data'
    ], function (customerData) {
        var sections = ['cart'];
        // fix for Uncaught TypeError: Cannot read properites of undefined (reading 'remove')
        customerData.initStorage();
        customerData.invalidate(sections);
        customerData.reload(sections, true);
    });
</script>

[stale]

This PR hasn't been touched in a while. Marking it as stale. If there is no activity in two days this PR will be auto-closed.