Magento 2 checkout address buttons are missing and the developer console shows a customAttributes error

Question

We have recently upgraded to Magento ver. 2.3.4 from 2.3.1 (open source) and currently have an issue in Checkout for registered customers. When they get to the shipping part of checkout they cannot see the buttons for selecting a different shipping address or editing an address:

Looking at the developer console we can also see an Uncaught error shich seems to relate to address:-

 Uncaught TypeError: Unable to process binding "foreach: function(){return {data:address().customAttributes,as:'element'} }"
 Message: Unable to process binding "text: function(){return $parent.getCustomAttributeLabel(element) }"
 Message: Cannot read property 'undefined' of undefined
     at UiClass.getCustomAttributeLabel (VM7680 default.js:68)
     at text (eval at createBindingsStringEvaluator (VM5344 knockout.js:1), <anonymous>:3:72)
     at update (VM5344 knockout.js:4659)
     at ko.dependentObservable.disposeWhenNodeIsRemoved (VM5344 knockout.js:3373)
     at Function.evaluateImmediate_CallReadThenEndDependencyDetection (VM5344 knockout.js:2173)
     at Function.evaluateImmediate_CallReadWithDependencyDetection (VM5344 knockout.js:2140)
     at Function.evaluateImmediate (VM5344 knockout.js:2101)
     at Object.ko.computed.ko.dependentObservable (VM5344 knockout.js:1954)
     at VM5344 knockout.js:3371
     at Object.arrayForEach (VM5344 knockout.js:159)

In addition we also get a similar error on the billing page

 Uncaught TypeError: Unable to process binding "if: function(){return isAddressDetailsVisible() && currentBillingAddress() }"
 Message: Unable to process binding "foreach: function(){return {data:currentBillingAddress().customAttributes,as:'element'} }"
 Message: Unable to process binding "text: function(){return  $parent.getCustomAttributeLabel(element) }"
 Message: Cannot read  property 'undefined' of undefined
     at UiClass.getCustomAttributeLabel (billing-address.js:258)
     at text (eval at createBindingsStringEvaluator (knockout.js:2982), <anonymous>:3:72)
     at update (knockout.js:4659)
     at ko.dependentObservable.disposeWhenNodeIsRemoved (knockout.js:3373)
     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 knockout.js:3371
     at Object.arrayForEach (knockout.js:159)

The customer data in the window.checkoutConfig is as follows

customerData:
website_id: "1"
email: "customeremail"
group_id: "1"
store_id: "1"
created_at: "2018-07-05 08:18:08"
updated_at: "2020-02-24 11:55:12"
disable_auto_group_change: "0"
created_in: "English"
prefix: null
firstname: "test"
middlename: null
lastname: "test"
suffix: null
dob: null
default_billing: "17058"
default_shipping: "17058"
taxvat: null
confirmation: null
gender: null
custom_attributes:
rewards_subscription:
attribute_code: "rewards_subscription"
value: "1"
__proto__: Object
mst_rewards_tier_id:
attribute_code: "mst_rewards_tier_id"
value: "1"
__proto__:
constructor: ƒ Object()
__defineGetter__: ƒ __defineGetter__()
__defineSetter__: ƒ __defineSetter__()
hasOwnProperty: ƒ hasOwnProperty()
__lookupGetter__: ƒ __lookupGetter__()
__lookupSetter__: ƒ __lookupSetter__()
isPrototypeOf: ƒ isPrototypeOf()
propertyIsEnumerable: ƒ propertyIsEnumerable()
toString: ƒ toString()
valueOf: ƒ valueOf()
toLocaleString: ƒ toLocaleString()
get __proto__: ƒ __proto__()
set __proto__: ƒ __proto__()
__proto__:
constructor: ƒ Object()
__defineGetter__: ƒ __defineGetter__()
__defineSetter__: ƒ __defineSetter__()
hasOwnProperty: ƒ hasOwnProperty()
__lookupGetter__: ƒ __lookupGetter__()
__lookupSetter__: ƒ __lookupSetter__()
isPrototypeOf: ƒ isPrototypeOf()
propertyIsEnumerable: ƒ propertyIsEnumerable()
toString: ƒ toString()
valueOf: ƒ valueOf()
toLocaleString: ƒ toLocaleString()
get __proto__: ƒ __proto__()
set __proto__: ƒ __proto__()
addresses:
17058:
id: "17058"
customer_id: "16774"
company: "Company Name"
prefix: null
firstname: "Test"
lastname: "Test"
middlename: null
suffix: null
street: (2) ["Unit X, Street Name One,", "Street Name Two,"]
city: "Cityname"
region: {region: null, region_code: null, region_id: 0}
region_id: "0"
postcode: "AB12 3CD"
country_id: "GB"
telephone: "1234567890"
fax: null
default_billing: true
default_shipping: true
inline: "Test Test, Unit X, Street Name One, Street Name Two,, Cityname,  AB12 3CD, United Kingdom"
custom_attributes: Array(0)
length: 0
__proto__: Array(0)
length: 0
constructor: ƒ Array()
concat: ƒ concat()
copyWithin: ƒ copyWithin()
fill: ƒ fill()
find: ƒ find()
findIndex: ƒ findIndex()
lastIndexOf: ƒ lastIndexOf()
pop: ƒ pop()
push: ƒ push()
reverse: ƒ reverse()
shift: ƒ shift()
unshift: ƒ unshift()
slice: ƒ slice()
sort: ƒ sort()
splice: ƒ splice()
includes: ƒ includes()
indexOf: ƒ indexOf()
join: ƒ join()
keys: ƒ keys()
entries: ƒ entries()
values: ƒ values()
forEach: ƒ forEach()
filter: ƒ filter()
flat: ƒ flat()
flatMap: ƒ flatMap()
map: ƒ map()
every: ƒ every()
some: ƒ some()
reduce: ƒ reduce()
reduceRight: ƒ reduceRight()
toLocaleString: ƒ toLocaleString()
toString: ƒ toString()
Symbol(Symbol.iterator): ƒ values()
Symbol(Symbol.unscopables): {copyWithin: true, entries: true, fill: true, find: true, findIndex: true, …}
__proto__: Object
extension_attributes:
__proto__: Object
vat_id: null
__proto__:
constructor: ƒ Object()
__defineGetter__: ƒ __defineGetter__()
__defineSetter__: ƒ __defineSetter__()
hasOwnProperty: ƒ hasOwnProperty()
__lookupGetter__: ƒ __lookupGetter__()
__lookupSetter__: ƒ __lookupSetter__()
isPrototypeOf: ƒ isPrototypeOf()
propertyIsEnumerable: ƒ propertyIsEnumerable()
toString: ƒ toString()
valueOf: ƒ valueOf()
toLocaleString: ƒ toLocaleString()
get __proto__: ƒ __proto__()
set __proto__: ƒ __proto__()
21917:
id: "21917"
customer_id: "16774"
company: "Company Name"
prefix: null
firstname: "Test"
lastname: "Test"
middlename: null
suffix: null
street: ["Unit X, Street Name One, Street Name Two"]
city: "Cityname"
region: {region: "Countyname", region_code: "Countyname", region_id: 0}
region_id: "0"
postcode: "AB12 3CD"
country_id: "TW"
telephone: ""
fax: null
default_billing: null
default_shipping: null
inline: "Test Test, Unit X, Street Name One, Street Name Two,, Cityname,  AB12 3CD, Taiwan"
custom_attributes: {email: {…}}
extension_attributes: {}
vat_id: null
__proto__: Object
__proto__:
constructor: ƒ Object()
__defineGetter__: ƒ __defineGetter__()
__defineSetter__: ƒ __defineSetter__()
hasOwnProperty: ƒ hasOwnProperty()
__lookupGetter__: ƒ __lookupGetter__()
__lookupSetter__: ƒ __lookupSetter__()
isPrototypeOf: ƒ isPrototypeOf()
propertyIsEnumerable: ƒ propertyIsEnumerable()
toString: ƒ toString()
valueOf: ƒ valueOf()
toLocaleString: ƒ toLocaleString()
get __proto__: ƒ __proto__()
set __proto__: ƒ __proto__()
id: "16774"
extension_attributes:
is_subscribed: false
__proto__:
constructor: ƒ Object()
__defineGetter__: ƒ __defineGetter__()
__defineSetter__: ƒ __defineSetter__()
hasOwnProperty: ƒ hasOwnProperty()
__lookupGetter__: ƒ __lookupGetter__()
__lookupSetter__: ƒ __lookupSetter__()
isPrototypeOf: ƒ isPrototypeOf()
propertyIsEnumerable: ƒ propertyIsEnumerable()
toString: ƒ toString()
valueOf: ƒ valueOf()
toLocaleString: ƒ toLocaleString()
get __proto__: ƒ __proto__()
set __proto__: ƒ __proto__()
__proto__:
constructor: ƒ Object()
__defineGetter__: ƒ __defineGetter__()
__defineSetter__: ƒ __defineSetter__()
hasOwnProperty: ƒ hasOwnProperty()
__lookupGetter__: ƒ __lookupGetter__()
__lookupSetter__: ƒ __lookupSetter__()
isPrototypeOf: ƒ isPrototypeOf()
propertyIsEnumerable: ƒ propertyIsEnumerable()
toString: ƒ toString()
valueOf: ƒ valueOf()
toLocaleString: ƒ toLocaleString()
get __proto__: ƒ __proto__()
set __proto__: ƒ __proto__()

Could anyone please let me know why this is happening and what I need to to do resolve the issue please?

Edit 02 March 2020

Many thanks to Khoa TruongDinh. I've created a workaround solution which involves creating a new template in the following location:

httpdocs > app > design > frontend > ThemeVendor > ThemeName > Magento_Checkout > web > template > shipping-information > address-renderer > default.html

and commenting out the custom attributes section of the template

<if args="visible()">
    <text args="address().prefix"/> <text args="address().firstname"/> <text args="address().middlename"/>
    <text args="address().lastname"/> <text args="address().suffix"/><br/>
    <text args="_.values(address().street).join(', ')"/><br/>
    <text args="address().city "/>, <span text="address().region"></span> <text args="address().postcode"/><br/>
    <text args="getCountryName(address().countryId)"/><br/>
    <a if="address().telephone" attr="'href': 'tel:' + address().telephone" text="address().telephone"></a><br/>
<!-- 
    <each args="data: address().customAttributes, as: 'element'">
        <text args="$parent.getCustomAttributeLabel(element)"/>
        <br/>
    </each>
-->
</if>

Obviously this isn't ideal but at least it makes the website workable while I look for a better solution.

Edit 17 March 2020 - SOLUTION

With thanks to Simon this now seems to be resolved. I used trial and error on my development site.

Going into the database table eav_attribute and removing the following two values seems to have fixed the error:

ID - 175 -  validation_status 
ID - 257  - email

I'm not sure what validation status is and email seems to be a duplicate value. Regardless removing these two rows from the database table seems to have resolved the error.

I have now implemented this on our live site.

Answer 1

I had exactly the same issue. I set a JS breakpoint in the line, which threw the error and looked at the attributes variable. There were multiple old attributes, which were migrated from M1. They lead to these issues. I simply deleted those old attributes in the database (table eav_attribute) and the error was gone.

Answer 2

For this kind of issue, it's really hard to find the root cause. Magento is hard, Js is hard.

My suggestion is to use Debugger.

• Chrome Devtools: https://developers.google.com/web/tools/chrome-devtools/javascript

• https://devdocs.magento.com/guides/v2.3/ui_comp_guide/troubleshoot/ui_comp_troubleshoot_js.html

• Debugging KnockoutJs How to debug in ko template in magento 2?

Get our hands dirty: based on your first error. I will find address().customAttributes in html template.

I can see 3 html templates - Magento default:

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

vendor/magento/module-checkout/view/frontend/web/template/shipping-address/address-renderer/default.html

vendor/magento/module-checkout/view/frontend/web/template/shipping-information/address-renderer/default.html

In this case, we can put the debugger code in 3 templates:

<div data-bind="text: ko.computed(function() { debugger; })"></div>

When debugger is trigger. In Console tab, we can check the address() object.