Magento 2.4.3 - Checkout JS knockout error - renderReCaptcha

Question

We upgrade to Magento 2.4.3 and now face the following JS knockout error in the checkout:

TypeError: Unable to process binding "afterRender: function (){return renderReCaptcha() }"
Message: undefined is not an object (evaluating 'this.settings.rendering')

We disabled the Magento CAPTCHA on storefront, the default Magento module.

Solution, update Magento_RecaptchaFrontendUi/js/reCapthca.js

if (typeof this.settings === 'undefined') { 
    return; 
}
parameters = _.extend(
    {
        'callback': function (token) { // jscs:ignore jsDoc
            this.reCaptchaCallback(token);
            this.validateReCaptcha(true);
        }.bind(this),
        'expired-callback': function () {
            this.validateReCaptcha(false);
        }.bind(this)
    },
    this.settings.rendering
);

Answer 1

This "error" occurs if you have ReCaptcha disabled. To get rid of it you can either enable ReCatptcha for checkout, rewrite the file which throws this error for proper error handling or just ignore it - it doesn't actually break anything.

parameters = _.extend(
    {
        'callback': function (token) { // jscs:ignore jsDoc
            this.reCaptchaCallback(token);
            this.validateReCaptcha(true);
        }.bind(this),
        'expired-callback': function () {
            this.validateReCaptcha(false);
        }.bind(this)
    },
    this.settings.rendering
);

this.settings is undefined if ReCatptcha is disabled so reading the rendering property obviously throws an error.

Answer 2

This is a known core bug.

Please see here: https://github.com/magento/magento2/issues/33741
The fix itself: https://github.com/magento/security-package/pull/302/files

Answer 3

Update answer for Zankar and jkulig:

This is correct and full answer:

1. Create new module:

app/code/Vendor/ReCaptchaFrontendUi/registration.php

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Vendor_ReCaptchaFrontendUi',
    __DIR__
);

app/code/Vendor/ReCaptchaFrontendUi/etc/module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Vendor_ReCaptchaFrontendUi" setup_version="1.0.0">
    </module>
</config>

2. Create mixin js to override this file (Magento_ReCaptchaFrontendUi/js/reCaptcha):

app/code/Vendor/ReCaptchaFrontendUi/view/frontend/requirejs-config.js

var config = {
    config: {
        mixins: {
            'Magento_ReCaptchaFrontendUi/js/reCaptcha': {
                'Vendor_ReCaptchaFrontendUi/js/reCaptcha-mixin': true
            }
        }
    }
};

app/code/Vendor/ReCaptchaFrontendUi/view/frontend/web/js/reCaptcha-mixin.js

define(function() {
    'use strict';

    return function(target) {
        return target.extend({
            initCaptcha: function () {
                if (typeof this.settings === 'undefined') {
                    return;
                }
                return this._super();
            },

            getIsInvisibleRecaptcha: function () {
                if (typeof this.settings === 'undefined') {
                    return;
                }
                return this._super();
            }
        });
    }
});

Answer 4

Override File : vendor/magento/module-re-captcha-checkout/Block/LayoutProcessor/Checkout/Onepage.php

Find below line:

['payment']['children']['beforeMethods']['children']['place-order-recaptcha'])) {

replace to

['payment']['children']['beforeMethods']['children']['place-order-recaptcha-container']['children']
['place-order-recaptcha'])) {

Answer 5

I also faced the same issue in my environment, So I created a module and fixed that issue.

Step1: Create registration.php file.

app/code/VendorName/ReCaptchaFrontendUi/registration.php

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'VendorName_ReCaptchaFrontendUi',
    __DIR__
);

Step2: Create module.xml

app/code/VendorName/ReCaptchaFrontendUi/etc/module.xml

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="VendorName_ReCaptchaFrontendUi" setup_version="1.0.0">
        <sequence>
            <module name="Magento_ReCaptchaFrontendUi"/>
        </sequence>
    </module>
</config>

Step3: Create requirejs-config.js file

app/code/VendorName/ReCaptchaFrontendUi/view/frontend/requirejs-config.js

var config = {
    config: {
        mixins: {
            'Magento_ReCaptchaFrontendUi/js/reCaptcha' : {
                'VendorName_ReCaptchaFrontendUi/js/reCaptcha-mixin' : true
            }
        }
    }
};

Step4: Create mixin file reCaptcha-mixin.js

app/code/VendorName/ReCaptchaFrontendUi/view/frontend/web/js/reCaptcha-mixin.js

define(
    [
        'uiComponent',
        'jquery',
        'ko',
        'underscore',
        'Magento_ReCaptchaFrontendUi/js/registry',
        'Magento_ReCaptchaFrontendUi/js/reCaptchaScriptLoader',
        'Magento_ReCaptchaFrontendUi/js/nonInlineReCaptchaRenderer'
    ], function (Component, $, ko, _, registry, reCaptchaLoader, nonInlineReCaptchaRenderer) {
        'use strict';

    return function(Component) {
        return Component.extend({
            initCaptcha: function () {
                if (typeof this.settings === 'undefined') { 
                    return; 
                }

                this._super();
            },
            
            getIsInvisibleRecaptcha: function () {
                if (typeof this.settings === 'undefined') { 
                    return; 
                }
                
                return this.settings.invisible;
            }
        });   
    }
});

Step 5: Run all the magento command, Issue will be fixed.

Thanks.

Answer 6

Create a mixin in your module or theme (eg. Magento_ReCaptchaFrontendUi/js/reCaptcha-mixin.js), reference it in local requirejs-config.js and add the following code:

define([], function() {
    'use strict';

    return function(Component) {
        return Component.extend({
            initCaptcha: function () {
                if (typeof this.settings === 'undefined') { 
                    return; 
                }

                this._super();
            },
            
            getIsInvisibleRecaptcha: function () {
                if (typeof this.settings === 'undefined') { 
                    return; 
                }
                
                return this._super();
            }
        });   
    }
});

This fixed the error for me and it should not cause conflicts with future upgrades.

Answer 7

This issue is fixed in 2.4.4 check: https://github.com/magento/security-package/pull/302#issuecomment-1016582416

I just tested in 2.4.5, and I can confirm it is solved in this version. I did not test it in 2.4.4.