Recaptcha Uncaught (in promise) null error with Flask

When trying to implement Recaptcha2 Invisible with Flask-WTF I ran into the following error:

Uncaught (in promise) null

This seemed to be a pretty obscure problem as I could not get any additional information from the application about what was going wrong. What finally got me to the solution was realizing that the form validation was no longer working.

While researching this issue I found the following code from a stack overflow comment that could be particularly useful for others if they are getting the same error and having an issue debugging it. If you modify your callback to use a Promise it should allow you to get the actual error message from your application so you can narrow down the issue.

function onSubmitCallback(token) {
    return new Promise(function (resolve, reject) {
        document.getElementById("register-form").submit();
    });
}

In my case.. it turned out that the generated html for the Flask submit button contained the code name="submit". This seemed to conflict with the callback function calling submit(). Here is my callback function for reference:

<script>
    function onSubmitCallback(token) {
        document.getElementById("register-form").submit();
    }
</script>

The solution in my case was just to not use the Flask-WTF submit button but just a little html to do the job instead:

<button id="register-submit" class="btn btn-purple block shadow-md focus:shadow-none ml-auto py-4 mt-4">
Create Account
</button>