How to load required js when using repatcha 3 with htmx?

[Garfieldas]

Hi,
I am trying to implement repatcha 3 on dynamic web app that uses htmx and alpine js.
The issue I currently have is that i get this error after swaping form inside dom:
VM312:4 Uncaught ReferenceError: grecaptcha is not defined
at :4:5
at c (VM252 htmx.min.js:1:11666)
at Ve (VM252 htmx.min.js:1:13076)
at _e (VM252 htmx.min.js:1:13732)
at ze (VM252 htmx.min.js:1:14759)
at e (VM252 htmx.min.js:1:46140)
at Mn (VM252 htmx.min.js:1:46911)
at p.onload (VM252 htmx.min.js:1:42097).
If I make full page reload everything works fine, but unfortunetally for this case I cannot do that as this will ruin interactivity for users

[Stormheg]

The grecaptcha error is coming from this inline script that is part of the form field html.

django-recaptcha/django_recaptcha/templates/django_recaptcha/includes/js_v3.html

Lines 2 to 21 in 060ea47

	<script src="https://{{ recaptcha_domain }}/recaptcha/api.js?render={{ public_key }}{% if api_params %}&{{ api_params }}{% endif %}"></script>
	<script>
	var element
	grecaptcha.ready(function() {
	element = document.querySelector('.g-recaptcha[data-widget-uuid="{{ widget_uuid }}"]');
	element.form.addEventListener('submit', recaptchaFormSubmit);
	});
	function recaptchaFormSubmit(event) {
	event.preventDefault();
	{% if action %}
	grecaptcha.execute('{{ public_key }}', {action: '{{ action|escape }}'})
	{% else %}
	grecaptcha.execute('{{ public_key }}', {})
	{% endif %}
	.then(function(token) {
	console.log("reCAPTCHA validated for 'data-widget-uuid=\"{{ widget_uuid }}\"'. Setting input value...")
	element.value = token;
	element.form.submit();
	});
	}

Right at the first line, you see the script reference that loads the grecaptcha library. That script is likely is not being executed, why is why grecaptcha is not defined.

To give you a short and blunt answer: django-recaptcha does not support swapping in HTML to the DOM like you are doing. The design of django-recaptcha does not consider this use case.

My recommendation would be to overwrite the js_v3.html template (see overriding templates in the django docs) with your own script that replicates setting the hidden form input. My hunch is that if you load the grecaptcha library somewhere else on your page so it is always available the field should work. Hope that is enough to point you in the right direction.

Would love to hear if you end up figuring out a workaround, what you did might be helpful for others coming here with a similar issue.