JS error on Dhl_Ui

[in-session]

Prerequisites: Magento 2.3.5-p2 PHP 7.2 dhl/shipping-m2 latest release

Steps to reproduce: Load cms pages/categories pages/product pages

behavior: No errors.

Actual behavior: An error in the console:

quote.js:33 Uncaught TypeError: Cannot read property 'quoteData' of undefined at quote.js:33 at Object.execCb (require.js:1650) at Object.context.execCb (resolver.js:145) at Module.check (require.js:866) at Module.enable (require.js:1143) at Module.init (require.js:774) at callGetModule (require.js:1170) at Object.completeLoad (require.js:1544) at HTMLScriptElement.onScriptLoad (require.js:1671)

Possible reason: It uses window.checkoutConfig and it breaks some of the scripts in require.js related to https://github.com/magento/magento2/issues/7475

[powli]

Hello @in-session,

our modules normally don't do any activity on said pages. It seems to me that either your theme or another plugin is requiring checkout or cart components that we extend. Please investigate if you can confirm that and if yes, give us some more info which components are actually loaded.

[powli]

See also #2

[in-session]

After clarification with our extension provider the problem lies in the colaboration of netresearch/dhl-module-ui and amasty/social-login.

[in-session]

DHL should get quote at checkout page/cart page only as at product page, the quote doesn't exist. We have created an additional javascript file which fixes the problem. So the reason could be conflict or module's issue (DHL UI should detect customer data and just get quote data of customer from cart/checkout page only) are acceptable I think.

/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
/**
 * @api
 */
define([
    'ko',
    'underscore',
    'domReady!'
], function (ko, _) {
    'use strict';

    /**
     * Fix Error DHL UI
     */
    if (!window.checkoutConfig) {
        window.checkoutConfig = {}
    }

    /**
     * Get totals data from the extension attributes.
     * @param {*} data
     * @returns {*}
     */
    var proceedTotalsData = function (data) {
            if (_.isObject(data) && _.isObject(data['extension_attributes'])) {
                _.each(data['extension_attributes'], function (element, index) {
                    data[index] = element;
                });
            }

            return data;
        },
        billingAddress = ko.observable(null),
        shippingAddress = ko.observable(null),
        shippingMethod = ko.observable(null),
        paymentMethod = ko.observable(null),
        quoteData = window.checkoutConfig.quoteData,
        basePriceFormat = window.checkoutConfig.basePriceFormat,
        priceFormat = window.checkoutConfig.priceFormat,
        storeCode = window.checkoutConfig.storeCode,
        totalsData = proceedTotalsData(window.checkoutConfig.totalsData),
        totals = ko.observable(totalsData),
        collectedTotals = ko.observable({});

    return {
        totals: totals,
        shippingAddress: shippingAddress,
        shippingMethod: shippingMethod,
        billingAddress: billingAddress,
        paymentMethod: paymentMethod,
        guestEmail: null,

        /**
         * @return {*}
         */
        getQuoteId: function () {
            if (quoteData) {
                return quoteData['entity_id'];
            }
            return false;
        },

        /**
         * @return {Boolean}
         */
        isVirtual: function () {
            if (quoteData) {
                return !!Number(quoteData['is_virtual']);
            }
            return 0;
        },

        /**
         * @return {*}
         */
        getPriceFormat: function () {
            return priceFormat;
        },

        /**
         * @return {*}
         */
        getBasePriceFormat: function () {
            return basePriceFormat;
        },

        /**
         * @return {*}
         */
        getItems: function () {
            return window.checkoutConfig.quoteItemData;
        },

        /**
         *
         * @return {*}
         */
        getTotals: function () {
            return totals;
        },

        /**
         * @param {Object} data
         */
        setTotals: function (data) {
            data = proceedTotalsData(data);
            totals(data);
            this.setCollectedTotals('subtotal_with_discount', parseFloat(data['subtotal_with_discount']));
        },

        /**
         * @param {*} paymentMethodCode
         */
        setPaymentMethod: function (paymentMethodCode) {
            paymentMethod(paymentMethodCode);
        },

        /**
         * @return {*}
         */
        getPaymentMethod: function () {
            return paymentMethod;
        },

        /**
         * @return {*}
         */
        getStoreCode: function () {
            return storeCode;
        },

        /**
         * @param {String} code
         * @param {*} value
         */
        setCollectedTotals: function (code, value) {
            var colTotals = collectedTotals();

            colTotals[code] = value;
            collectedTotals(colTotals);
        },

        /**
         * @return {Number}
         */
        getCalculatedTotal: function () {
            var total = 0.; //eslint-disable-line no-floating-decimal

            _.each(collectedTotals(), function (value) {
                total += value;
            });

            return total;
        }
    };
});

[mam08ixo]

Glad this works for you. Currently, we are not in a position to replicate the issue.

For us it is still not clear whether we need to make modifications to our code or not. Do we need to make it more "defensive" somewhere? Or is it the 3rd party module doing something wrong? How is any of the Dhl_Ui JS involved at all (stack trace, anything)?

If you can provide further information that puts us in a position to better understand the issue, we are happy to move forward. PRs are always welcome. Otherwise we will have to close the issue.

Thanks

[jmarwilhelm]

I do have the same problem as mentioned and the js file provided here works for me as well. Additionally I do have a problem in the one step checkout. Once finalising the all required field the Ajax call now try to update the forms and thus leading to an infinite loop of the following three calls: xx/rest/default/V1/guest-carts/DzVPfR0MDgBqV6SVZ6oJW51mtDiooRig/dhl/shipping-option/selection/update xx/customer/section/load/?sections=gtm%2Cmessages&force_new_sectiontimestamp=true&=1608827080661 xx/rest/default/V1/guest-carts/DzVPfR0MDgBqV6SVZ6oJW51mtDiooRig/shipping-information

any ideas?

[parlt]

This bug still open not clear why someone closed it, there is a wrong injection of dependencies. I have created a new ticket the bug is a showstopper https://github.com/netresearch/dhl-module-ui/issues/7