jQuery.Deferred exception: this.success is not a function TypeError: this.success is not a function

[marcoveeneman]

Hi,

We are using module version 3.4.0 in a magento 2.4.5-p10 shop, facing the following error:

jQuery.Deferred exception: this.success is not a function TypeError: this.success is not a function
    at UiClass.validate (https://www.example.com/static/version1736166826/frontend/Vendor/theme-example/nl_NL/Magento_Ui/js/form/element/abstract-ext.js:68:26)
    at UiClass.validate (https://www.example.com/static/version1736166826/frontend/Vendor/theme-example/nl_NL/mage/utils/wrapper.js:109:34)
    at UiClass.onStatus (https://www.example.com/static/version1736166826/frontend/Vendor/theme-example/nl_NL/Flekto_Postcode/js/form/element/house-number.js:49:18)
    at setNested (https://www.example.com/static/version1736166826/frontend/Vendor/theme-example/nl_NL/mage/utils/objects.js:44:25)
    at Object.nested (https://www.example.com/static/version1736166826/frontend/Vendor/theme-example/nl_NL/mage/utils/objects.js:118:20)
    at UiClass.set (https://www.example.com/static/version1736166826/frontend/Vendor/theme-example/nl_NL/Magento_Ui/js/lib/core/element/element.js:305:19)
    at updateValue (https://www.example.com/static/version1736166826/frontend/Vendor/theme-example/nl_NL/Magento_Ui/js/lib/core/element/links.js:80:19)
    at setLink (https://www.example.com/static/version1736166826/frontend/Vendor/theme-example/nl_NL/Magento_Ui/js/lib/core/element/links.js:209:17)
    at https://www.example.com/static/version1736166826/frontend/Vendor/theme-example/nl_NL/Magento_Ui/js/lib/core/element/links.js:236:25
    at Registry._resolveRequest (https://www.example.com/static/version1736166826/frontend/Vendor/theme-example/nl_NL/Magento_Ui/js/lib/registry/registry.js:416:30)

Module is configured as follows:

• Dutch address fields behavior
  • Only zipcode and housenumber
• Address fields behavior in autocomplete
  • Hide fields and show a formatted address instead
• Add manual entry
  • No
• Change address field position
  • Yes

The error happens in the following scenario:

1. add product to cart
2. go to chechout
3. fill in address
4. Go back to modify cart, e.g. add a new product or change quantity
5. Go to checkout again
6. Fields are prefilled, but housenumber field is missing and error is showing in console

I'll have a look into the error since we are seeing this behaviour in multiple shops at the moment, so i think it is likely an issue in the module.

[marcoveeneman]

Some progress:

I added logging in abstract-ext.js, in both the initialize and validate methods, logging the method, this.uid and this.component. Also disabling the calls to this.success:

            /**
             * Initialize success observable
             */
            initializeSuccess: function () {
                if (this.component[0] === "F") {
                    console.info("initializeSuccess", this.uid, this.component);
                }

                this.success = ko.observable('');
                this.observe('success');
                this.additionalClasses._success = this.success;
            },

            /**
             * When validate field (it happens when 'value' property is updated) update success observable
             */
            validate: function () {
                if (this.component[0] === "F") {
                    console.info("validate", this.uid, this.component);
                }
                
                var validationResults = this._super();
                if (validationResults.valid && this.value()) {
                    //this.success(true);
                } else {
                    //this.success(false);
                }

                return validationResults;
            },

What is interesting is the following logging. It looks like somehow the validate method on house-number is called BEFORE the initializeSuccess method is called. This causes this.success to be undefined.

initializeSuccess NLC958O Flekto_Postcode/js/form/element/house-number
validate QCC3M5Q Flekto_Postcode/js/form/element/house-number
initializeSuccess QCC3M5Q Flekto_Postcode/js/form/element/house-number
initializeSuccess JUC7CY4 Flekto_Postcode/js/form/element/postcode
initializeSuccess FSFT6L0 Flekto_Postcode/js/form/element/postcode
initializeSuccess C8FKY1P Flekto_Postcode/js/form/element/house-number-select
initializeSuccess SR2TI4U Flekto_Postcode/js/form/element/house-number-select
initializeSuccess CTDI59D Flekto_Postcode/js/form/element/checkout/address-autofill-intl
initializeSuccess GSI8JE2 Flekto_Postcode/js/form/element/checkout/address-autofill-intl
validate FSFT6L0 Flekto_Postcode/js/form/element/postcode
validate QCC3M5Q Flekto_Postcode/js/form/element/house-number

I wonder how this can happen.

[marcoveeneman]

Checking the callstack when this.success is undefined:

validate (abstract-ext.js:80)
onStatus (house-number.js:49)
setNested (objects.js:44)
nested (objects.js:118)
set (element.js:305)
updateValue (links.js:80)
setLink (links.js:209)
(anonymous) (links.js:236)
_resolveRequest (registry.js:416)
_addRequest (registry.js:383)
get (registry.js:227)
transfer (links.js:233)
setLinks (links.js:289)
initLinks (element.js:186)
initialize (element.js:107)
initialize (abstract.js:79)
initialize (abstract-ext.js:18)
initialize (house-number.js:24)

house-number onStatus is called while in house-number initialize (this_super() method) when linking import. At this point this.success observable is not initialized yet.

[JerrySmidt]

Hello Marco,

The file abstract-ext.js does not seem to be part of Magento Open Source. Is this file is part of Enterprise edition or something custom, we don't support it.

You could probably work around the problem by using a mixin for house-number.js though.

[marcoveeneman]

Hi Jerry,

Thank you for the hint, it seems that abstract-ext.js is indeed a mixin from another module. (from MageSuite's theme-creativeshop to be precise).

There is a mixin in order to mark fields as success with a knockout observer based on the validation result to show an indicator. However, for the postcode check, the valdiation logic is triggered before the object is fully initialized (while still in this._super), causing the success observer from abstract-ext.js to be undefined at the time onStatus is called.

With some experiments it looks like i can delay the execution of onStatus, but i'm not sure if there are any side effects. Do you know if it is safe to do the following from a custom mixin of house-number?:

define(function () {
    'use strict';

    return function(target) {
        return target.extend({
            onStatus: function (status) {
                if (!this.hasOwnProperty('success')) {
                    // Delay call after object is initialized
                    let deferredOnStatus = this._super.bind(this);
                    setTimeout(() => { deferredOnStatus(status); });
                } else {
                    // Normal flow
                    this._super(status);
                }
            },
        });
    };
});

What is interesting is that with postcode module version 3.2.0 everything works as expected, also with earlier versions. With 3.4.0 the error appears. I wonder what has changed that is now causing this integration issue.

I'll have another look at it.

[JerrySmidt]

Yes, it's probably safe.

I'll look into compatibility with MageSuite when I have some more time, so that this workaround is hopefully no longer needed.