Uncaught ReferenceError: grecaptcha is not defined

[bpalmerzag]

I believe I have it installed and configured. When adding @Html.RenderRecaptchaLib(), I added @using CitroDigital.InvisibleRecaptcha.Infrastructure; to resolve an error. I'm getting the Google Recaptcha badge at the bottom of the screen so think I'm pretty much set but was curious about the console error: Uncaught ReferenceError: grecaptcha is not defined.

I've read this might be an order-of loading issue but I'm hesitant to start messing with the code. Is there a common cause for the console error as it relates to CitroDigital/InvisibleRecpatcha?

[srvsauravs]

Please use @using CitroDigital.InvisibleRecaptcha.Infrastructure

If this doesn't work, try uninstalling the nuget package and install it again. I had the same issue.

[bpalmerzag]

I got there with the using statement and that resolved build issues. But I was still having JS issues. I moved @Html.RenderRecaptchaLib() into the of the document. I'm guessing it should have always been there and not towards the bottom of the document. I also noticed that loader.js was added in two places for me:

/loader.js /Scripts/recaptcha/loader.js

I felt confident getting rid of the first one.

Then I updated the remaining loader.js to include grecaptcha.ready(function () { ... } per https://developers.google.com/recaptcha/docs/v3#programmatically_invoke_the_challenge

function onRecaptchaLoad(apiKey, element) {

var input = document.querySelector('#' + element);
var params = {
    action: input.dataset['action']
};
grecaptcha.ready(function () {
    grecaptcha.execute(apiKey, params).then(function (token) {
        // Add your logic to submit to your backend server here.
    });
});

}

It renders the recaptcha badge and doesn't throw JS errors so I may deploy it and keep an eye on google's tracking.

[srvsauravs]

Hi,

Can you please replace the below line in your "/Scripts/recaptcha/loader.js". You'll know where to replace.

grecaptcha.execute

also remove the ready function. Its not required.

The nuget brought in the wrong JS and I had to update it from the original project.

Hope it helps.