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

[maharzan86]

Preconditions (*)
Magento CE 2.3.2, PHP 7.1.30, Ubuntu 18.04, MariaDb 14.14, Magento caching enabled

Steps to reproduce
install Magento 2.3.2
add any product to cart
proceed to checkout
enter login details
click to Next
check to Free Shipping and then click to next
in the checkout payment page error occurs

Expected result (*)
Checkout Payment successfully with no errors

Actual result (*)
There is data-bind error - knockout.js:3391 Uncaught ReferenceError: Unable to process binding "if: function(){return (addressOptions.length > 1) }"

Message: addressOptions is not defined. Message: addressOptions is not defined at if (eval at createBindingsStringEvaluator (knockout.js:2992), <anonymous>:3:55) at ko.computed.disposeWhenNodeIsRemoved (knockout.js:4391) at Function.evaluateImmediate_CallReadThenEndDependencyDetection (knockout.js:2183) at Function.evaluateImmediate_CallReadWithDependencyDetection (knockout.js:2150) at Function.evaluateImmediate (knockout.js:2111) at Object.ko.computed.ko.dependentObservable (knockout.js:1964) at init (knockout.js:4390) at knockout.js:3368 at Object.ignore (knockout.js:1480) at knockout.js:3367

[m2-assistant[bot]]

Hi @maharzan86. Thank you for your report.
To help us process this issue please make sure that you provided the following information:

• [ ] Summary of the issue
• [ ] Information on your environment
• [ ] Steps to reproduce
• [ ] Expected and actual results

Please make sure that the issue is reproducible on the vanilla Magento instance following Steps to reproduce. To deploy vanilla Magento instance on our environment, please, add a comment to the issue:

@magento give me 2.3-develop instance - upcoming 2.3.x release

For more details, please, review the Magento Contributor Assistant documentation.

@maharzan86 do you confirm that you were able to reproduce the issue on vanilla Magento instance following steps to reproduce?

• [ ] yes
• [ ] no

---

• Join Magento Community Engineering Slack and ask your questions in #github channel.

[maharzan86]

yes

[maharzan86]

This is working fine in 2.3.1 but not in 2.3.2.

[m2-assistant[bot]]

Hi @engcom-Charlie. Thank you for working on this issue.
In order to make sure that issue has enough information and ready for development, please read and check the following instruction: :point_down:

• [x] 1. Verify that issue has all the required information. (Preconditions, Steps to reproduce, Expected result, Actual result).
  Details

  If the issue has a valid description, the label Issue: Format is valid will be added to the issue automatically. Please, edit issue description if needed, until label Issue: Format is valid appears.

• [x] 2. Verify that issue has a meaningful description and provides enough information to reproduce the issue. If the report is valid, add Issue: Clear Description label to the issue by yourself.

• [x] 3. Add Component: XXXXX label(s) to the ticket, indicating the components it may be related to.

• [x] 4. Verify that the issue is reproducible on 2.3-develop branch

  Details

  - Add the comment @magento give me 2.3-develop instance to deploy test instance on Magento infrastructure.
  - If the issue is reproducible on 2.3-develop branch, please, add the label Reproduced on 2.3.x.
  - If the issue is not reproducible, add your comment that issue is not reproducible and close the issue and _stop verification process here_!
  

• [ ] 5. Verify that the issue is reproducible on 2.2-develop branch.

  Details

  - Add the comment @magento give me 2.2-develop instance to deploy test instance on Magento infrastructure.
  - If the issue is reproducible on 2.2-develop branch, please add the label Reproduced on 2.2.x

• [ ] 6. Add label Issue: Confirmed once verification is complete.

• [ ] 7. Make sure that automatic system confirms that report has been added to the backlog.

[maharzan86]

@magento give me 2.3.2-develop instance

[magento-engcom-team]

Hi @maharzan86. Thank you for your request. I'm working on Magento 2.3.2-develop instance for you

[engcom-Charlie]

Hi @maharzan86 ! I can't reproduce this issue on 2.3.2 and 2.3-develop branches. So i close it.

[celorodovalho]

I have the same problem when tried to upgrade to 2.3.2 version:

knockout.js:3391 Uncaught ReferenceError: Unable to process binding "if: function(){return (addressOptions.length > 1) }"
Message: addressOptions is not defined
    at if (eval at createBindingsStringEvaluator (knockout.js:2992), <anonymous>:3:55)
    at ko.computed.disposeWhenNodeIsRemoved (knockout.js:4391)
    at Function.evaluateImmediate_CallReadThenEndDependencyDetection (knockout.js:2183)
    at Function.evaluateImmediate_CallReadWithDependencyDetection (knockout.js:2150)
    at Function.evaluateImmediate (knockout.js:2111)
    at Object.ko.computed.ko.dependentObservable (knockout.js:1964)
    at init (knockout.js:4390)
    at knockout.js:3368
    at Object.ignore (knockout.js:1480)
    at knockout.js:3367
    at Object.arrayForEach (knockout.js:159)
    at applyBindingsToNodeInternal (knockout.js:3353)
    at applyBindingsToNodeAndDescendantsInternal (knockout.js:3233)
    at applyBindingsToDescendantsInternal (knockout.js:3215)
    at applyBindingsToNodeAndDescendantsInternal (knockout.js:3242)
    at Object.ko.applyBindings (knockout.js:3444)

(function anonymous($context,$element
) {
with($context){with($data||{}){return{'if':function(){return (addressOptions.length > 1) }}}}
})

[hmphu]

@celorodovalho I have fixed this issue by editing magento core file in vendor dir at vendor/magento/module-checkout/Block/Checkout/LayoutProcessor.php

You can see the change in my Git diff here: https://gist.github.com/hmphu/b752d3f1c401fd862bf5ee0552507322

Please try and share your result here if this work

[celorodovalho]

@hmphu badly doesn't work to me. I'm still trying to figure out.

[maharzan86]

@hmphu I've also tried your solution but surely it won't show that error but in checkout-payment page it won't display the payee details like full name, country, states and phone no. details.

But actual result needs to be like this.

[Dzhus111]

It's seems the problem is with template difference 2.3.1 with 2.3.2
If you rewrote the template vendor/magento/module-checkout/view/frontend/web/template/billing-address.html in your theme for magento 2.3.1, you can not see that this template is changed a lot in 2.3.2. In old version (2.3.1) the template Magento_Checkout/billing-address/list inserted directly in billing-address.html, but in 2.3.2 it is renders via "getRegion('billing-address-list')" with ui component. So just make shure that billing-address.html in your theme is corresponded to billing-address.html in vendor

[celorodovalho]

Thank you @Dzhus111, it was exactly my problem!

[nikhil91100]

@celorodovalho can i know how you fixed ? Im using porto theme .

[celorodovalho]

@nikhil91100 I just follow @Dzhus111 said.
I copy and paste the "billing-address.html" from vendor and replace my changes.

[nikhil91100]

copied vendor/magento/module-checkout/view/frontend/web/template/billing-address.html and pasted in app/design/frontend/My_ Theme/Magento_Checkout/web/template/ folder right ?

[celorodovalho]

Yes!

[nikhil91100]

I tried the same but its not working :-(

[ahentea]

@Dzhus111 , same problem for me and it worked!

@nikhil91100 make sure that the replaced filed is generated in the pub/static/ folder otherwise you will still be loading the old version of that file. To be sure delete the static folder content, clear caches and try again.

[skitter-anton]

Also have this problem. Just updated to 2.3.3 with Porto theme. Also tried Magento Luma theme but same problem. Tried clear cache, rebuild static content but still same error. It's strange since it also happens on Luma theme right? This means the solution from @Dzhus111 won't work right?

[kanduvisla]

I have this problem as well. I've updated the templates, but now I only have this problem in Firefox when the inspector is closed. That's right: if the inspector is open, everything works as expected, if the inspector is closed, I get these errors and the "place order" buttons does not have any text :-(

Anyone else experienced this issue?

[jonathan-martz]

Iam facing the same problem.
Fix of @hmphu doesnt works for me as well.

Fix of @Dzhus111 works for me.

[dbartelmus]

Same problem, different theme, solution @hmphu doesn't work

[alexlopezrubio]

@celorodovalho I have fixed this issue by editing magento core file in vendor dir at vendor/magento/module-checkout/Block/Checkout/LayoutProcessor.php

You can see the change in my Git diff here: https://gist.github.com/hmphu/b752d3f1c401fd862bf5ee0552507322

Please try and share your result here if this work

This fix really works!

[alexlopezrubio]

Just delete:
From: vendor/magento/module-checkout/Block/Checkout/LayoutProcessor.php
Around Line 160

    if (isset($jsLayout['components']['checkout']['children']['steps']['children']['billing-    step']['children']
        ['payment']['children'])) {
        $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
        ['payment']['children'] = $this->processPaymentChildrenComponents(
        $jsLayout['components']['checkout']['children']['steps']['children']['billing-step']['children']
        ['payment']['children'],
        $elements
       );
    }

[fj-sfd]

After upgrading to 2.3.3, I also had same issue:

knockout.js:3381 Uncaught ReferenceError: Unable to process binding "if: function(){return (addressOptions.length > 1) }"
Message: addressOptions is not defined
    at if (eval at createBindingsStringEvaluator (knockout.js:2982), <anonymous>:3:55)
    at ko.computed.disposeWhenNodeIsRemoved (knockout.js:4381)
    at Function.evaluateImmediate_CallReadThenEndDependencyDetection (knockout.js:2173)
    at Function.evaluateImmediate_CallReadWithDependencyDetection (knockout.js:2140)
    at Function.evaluateImmediate (knockout.js:2101)
    at Object.ko.computed.ko.dependentObservable (knockout.js:1954)
    at init (knockout.js:4380)
    at knockout.js:3358
    at Object.ignore (knockout.js:1470)
    at knockout.js:3357

Updating template: \app\design\frontendTHEME\PACKAGE\Magento_Checkout\web\template\billing-address.html
from: vendor\magento\module-checkout\view\frontend\web\template\billing-address.html
worked for me.

[MicheleBeargroup]

Because we'd customized our checkout and billing showed up at an earlier step, I had to backtrack through templates that were pulling into our customized version of billing-address.html - one of these items was list.html - so I added that template to our theme with a check for addressOptions since it was possible with a Guest user it would not exist -
typeof addressOptions !== 'undefined' && addressOptions.length > 1

[mirzasahaab]

/** * 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';
    }
});

});

[manobi]

@hmphu solution is the only one that actually worked. Thank you.