4

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
);
1

7 Answers 7

0

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.

5
  • Thanks for the reply! What is the exact file and what should be the correct way of rewriting so the error message disappear?
    – JGeer
    Oct 6, 2021 at 7:46
  • 1
    You should only rewrite the initCaptcha function using a mixin. The file is Magento_RecaptchaFrontendUi/js/reCapthca.js - read more devdocs.magento.com/guides/v2.4/javascript-dev-guide/javascript/… You should just add a check in the beginning, something like if (typeof this.settings === 'undefined') { return; }
    – Zankar
    Oct 6, 2021 at 8:39
  • 1
    after adding the fixed proposed, now I am getting this js error: Uncaught TypeError: Unable to process binding "if: function(){return (!getIsInvisibleRecaptcha()) }", any clue ? :) thanks Nov 19, 2021 at 8:39
  • 1
    Modify one more method to return , getIsInvisibleRecaptcha: function () { if (typeof this.settings === 'undefined') { return; } return this.settings.invisible; },
    – leo
    Nov 19, 2021 at 8:56
  • Your answer show us what is the true issue here and so we can custom code by our self, but I've create an full answer for some one who lazy to write their our code, please check, thanks.
    – fudu
    Dec 2, 2021 at 2:58
14

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

4

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>
  1. 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();
            }
        });
    }
});
2

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'])) {
1
  • But it's not good way to direct change in vendor - It's override the file as custom module Apr 7, 2022 at 13:44
1

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.

1

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.

2
  • Your answer make an issue: this.super(); is not a function. I've create an update answer, please check, thanks.
    – fudu
    Dec 2, 2021 at 2:56
  • Also, you missing all the define() params.
    – fudu
    Dec 2, 2021 at 3:08
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.