Uncaught ReferenceError: Unable to process binding "if: function(){return (addressOptions.length > 1) }" Message: addressOptions is not defined

Question

I have updated Magento2.3.1 to Magento2.3.2. When proceed to checkout I am getting the data-bind error -

knockout-3.4.1.js:72 Uncaught ReferenceError: Unable to process binding "if: function(){return (addressOptions.length > 1) }" Message: addressOptions is not defined

When I searched the keyword addressOptions in my magento folder the file path is: /vendor/magento/module-checkout/view/frontend/web/template/billing-address/list.html and the code in the html file is:

<div class="field field-select-billing">
    <label class="label"><span data-bind="i18n: 'My billing and shipping address are the same'"></span></label>
    <div class="control" data-bind="if: (addressOptions.length > 1)">
        <select class="select" name="billing_address_id" data-bind="
        options: addressOptions,
        optionsText: addressOptionsText,
        value: selectedAddress,
        event: {change: onAddressChange(selectedAddress())};
    "></select>
    </div>
</div>

The error is attached as belowknockout.js If anybody knows please help me. Thanks in advance.

Answer 1

I was able to solve rewriting the billing-address.html template of a custom plugin which I bought. In this template there was the inclusion of the billing address list template in this way:

<!-- ko template: 'Magento_Checkout/billing-address/list' --><!-- /ko -->

while in the core of magento the template was included in this way instead:

<each args="getRegion('billing-address-list')" render="" />

so I made this change in my template and I receive no more errors. Maybe something changend in the latest Magento2.3 versions regarding the inclusions of this kind of templates?

Answer 2

/**
 * Magento 2.3.2 Fix checkout address issue.
*/

define([
    'ko',
    'underscore',
    'Magento_Ui/js/form/form',
    'Magento_Customer/js/model/customer',
    'Magento_Customer/js/model/address-list',
    'Magento_Checkout/js/model/quote',
    'Magento_Checkout/js/action/create-billing-address',
    'Magento_Checkout/js/action/select-billing-address',
    'Magento_Checkout/js/checkout-data',
    'Magento_Checkout/js/model/checkout-data-resolver',
    'Magento_Customer/js/customer-data',
    'Magento_Checkout/js/action/set-billing-address',
    'Magento_Ui/js/model/messageList',
    'mage/translate'
],
function (
    ko,
    _,
    Component,
    customer,
    addressList,
    quote,
    createBillingAddress,
    selectBillingAddress,
    checkoutData,
    checkoutDataResolver,
    customerData,
    setBillingAddressAction,
    globalMessageList,
    $t
) {
'use strict';

var lastSelectedBillingAddress = null,
newAddressOption = {
    /**
     * Get new address label
     * @returns {String}
     */
    getAddressInline: function () {
        return $t('New Address');
    },
    customerAddressId: null
},
countryData = customerData.get('directory-data'),
addressOptions = addressList().filter(function (address) {
    return address.getType() == 'customer-address'; //eslint-disable-line eqeqeq
});

addressOptions.push(newAddressOption);

return Component.extend({
    defaults: {
        template: 'Magento_Checkout/billing-address',
        actionsTemplate: 'Magento_Checkout/billing-address/actions',
        formTemplate: 'Magento_Checkout/billing-address/form',
        detailsTemplate: 'Magento_Checkout/billing-address/details',
        links: {
            isAddressFormVisible: '${$.billingAddressListProvider}:isNewAddressSelected'
        }
    },
    currentBillingAddress: quote.billingAddress,
    addressOptions: addressOptions,
    customerHasAddresses: addressOptions.length > 0,

    /**
     * Init component
     */
    initialize: function () {
        this._super();
        quote.paymentMethod.subscribe(function () {
            checkoutDataResolver.resolveBillingAddress();
        }, this);
    },

    /**
     * @return {exports.initObservable}
     */
    initObservable: function () {
        this._super()
            .observe({
                selectedAddress: null,
                isAddressDetailsVisible: quote.billingAddress() != null,
                isAddressFormVisible: !customer.isLoggedIn() || !addressOptions.length,
                isAddressSameAsShipping: false,
                saveInAddressBook: 1
            });

        quote.billingAddress.subscribe(function (newAddress) {
            if (quote.isVirtual()) {
                this.isAddressSameAsShipping(false);
            } else {
                this.isAddressSameAsShipping(
                    newAddress != null &&
                    newAddress.getCacheKey() == quote.shippingAddress().getCacheKey() //eslint-disable-line eqeqeq
                );
            }

            if (newAddress != null && newAddress.saveInAddressBook !== undefined) {
                this.saveInAddressBook(newAddress.saveInAddressBook);
            } else {
                this.saveInAddressBook(1);
            }
            this.isAddressDetailsVisible(true);
        }, this);

        return this;
    },

    /**
    * @param {Object} address
    */
    onAddressChange: function (address) {
        (address === newAddressOption) ? this.isAddressFormVisible(false) : this.isAddressFormVisible(true);
    },


    canUseShippingAddress: ko.computed(function () {
        return !quote.isVirtual() && quote.shippingAddress() && quote.shippingAddress().canUseForBilling();
    }),

    /**
     * @param {Object} address
     * @return {*}
     */
    addressOptionsText: function (address) {
        return address.getAddressInline();
    },

    /**
     * @return {Boolean}
     */
    useShippingAddress: function () {
        if (this.isAddressSameAsShipping()) {
            selectBillingAddress(quote.shippingAddress());

            this.updateAddresses();
            this.isAddressDetailsVisible(true);
        } else {
            lastSelectedBillingAddress = quote.billingAddress();
            quote.billingAddress(null);
            this.isAddressDetailsVisible(false);
        }
        checkoutData.setSelectedBillingAddress(null);

        return true;
    },

    /**
     * Update address action
     */
    updateAddress: function () {
        var addressData, newBillingAddress;

        // if (this.selectedAddress() && !this.isAddressFormVisible()) {
        if (this.selectedAddress() && this.selectedAddress() != newAddressOption) { //eslint-disable-line eqeqeq
            selectBillingAddress(this.selectedAddress());
            checkoutData.setSelectedBillingAddress(this.selectedAddress().getKey());
        } else {
            this.source.set('params.invalid', false);
            this.source.trigger(this.dataScopePrefix + '.data.validate');

            if (this.source.get(this.dataScopePrefix + '.custom_attributes')) {
                this.source.trigger(this.dataScopePrefix + '.custom_attributes.data.validate');
            }

            if (!this.source.get('params.invalid')) {
                addressData = this.source.get(this.dataScopePrefix);

                if (customer.isLoggedIn() && !this.customerHasAddresses) { //eslint-disable-line max-depth
                    this.saveInAddressBook(1);
                }
                addressData['save_in_address_book'] = this.saveInAddressBook() ? 1 : 0;
                newBillingAddress = createBillingAddress(addressData);

                // New address must be selected as a billing address
                selectBillingAddress(newBillingAddress);
                checkoutData.setSelectedBillingAddress(newBillingAddress.getKey());
                checkoutData.setNewCustomerBillingAddress(addressData);
            }
        }
        this.updateAddresses();
    },

    /**
     * Edit address action
     */
    editAddress: function () {
        lastSelectedBillingAddress = quote.billingAddress();
        quote.billingAddress(null);
        this.isAddressDetailsVisible(false);
    },

    /**
     * Cancel address edit action
     */
    cancelAddressEdit: function () {
        this.restoreBillingAddress();

        if (quote.billingAddress()) {
            // restore 'Same As Shipping' checkbox state
            this.isAddressSameAsShipping(
                quote.billingAddress() != null &&
                    quote.billingAddress().getCacheKey() == quote.shippingAddress().getCacheKey() && //eslint-disable-line
                    !quote.isVirtual()
            );
            this.isAddressDetailsVisible(true);
        }
    },

    /**
     * Manage cancel button visibility
     */
    canUseCancelBillingAddress: ko.computed(function () {
        return quote.billingAddress() || lastSelectedBillingAddress;
    }),

    /**
     * Restore billing address
     */
    restoreBillingAddress: function () {
        if (lastSelectedBillingAddress != null) {
            selectBillingAddress(lastSelectedBillingAddress);
        }
    },

    /**
     * @param {Number} countryId
     * @return {*}
     */
    getCountryName: function (countryId) {
        return countryData()[countryId] != undefined ? countryData()[countryId].name : ''; //eslint-disable-line
    },

    /**
     * Trigger action to update shipping and billing addresses
     */
    updateAddresses: function () {
        if (window.checkoutConfig.reloadOnBillingAddress ||
            !window.checkoutConfig.displayBillingOnPaymentMethod
        ) {
            setBillingAddressAction(globalMessageList);
        }
    },

    /**
     * Get code
     * @param {Object} parent
     * @returns {String}
     */
    getCode: function (parent) {
        return _.isFunction(parent.getCode) ? parent.getCode() : 'shared';
    }
});
});

Answer 3

You have

vendor/magento/module-checkout/view/frontend/web/template/billing-address.html

rewritten in your custom theme.

Bring it up to date, recompile and see if it solves your problem.