react-google-recaptcha | Component wrapper for Google reCAPTCHA | Form library

I'm using the library react-google-recaptcha to generate invisible ReCaptcha and I get the follow typescript error:

Property 'execute' does not exist in type 'never'

This is the code:

I just deployed an app through Heroku and ran into the following error listed below. I am using create-react-app. This app runs fine in the development server. I only had issues once I tried to deploy.

I made sure to have sass installed and not node-sass because I learned node-sass has been deprecated.

I already read through multiple pages on StackOverFlow, including this one Cannot find module 'sass'

However, after reading through all these answers I was unable to discover a solution.

I'm attempting to remove a css class btn-disabled from the input button element when someone verifies their entry to the form.

I currently created a function called enableForm to remove the CSS class btn-disabled when reCAPTCHA is verified.

At the moment my CSS class does not get removed which doesn't allow the form to submit. My console.log yes is appearing so the function is being called but I am not able to remove the CSS class. This method was working previously using regular javascript now I'm attempting to do the same on nextjs. How can I remove my CSS class on the success of reCAPTCHA?

Here is my code snippet:

I have a Next.js app, index page contains only captcha, and after successfull entry redirects to form at mydomain.com/form and that works just fine. But also i can just enter in browser

mydomain.com/form

and get to it without captcha, which i obviously dont want.

Is there a way to restrict all entries except redirect from captcha page? Found only solutions with logins, e.t.c which i dont need.

Im using react-google-recaptcha package

Here is my index page

I'm trying to send a form from a react/node/axios website on my localhost:3000 and a node/nodemailer server running on localhost: 4000, when a submit the form/axios.post it take some seconds then i receive this error on clg:

I'm trying to implement invisible reCaptcha from react-google-recaptcha in type script project

I added the package's type by

I'm using the library react-google-recaptcha-v3 in order to integrate reCAPTCHA v3 into my React application, which also uses Next.

There's the following example in the README introducing users to the useGoogleReCaptcha hook:

I am having an error when I build my application in react. I noticed this error only when I tried to build application.

When I stopped dev server and ran it again, it showed the same error. It seems that I made some change that only showed when I started the server again or make build:

Module not found: Error: Can't resolve 'buffer' in '\node_modules\htmlparser2\lib' BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.This is no longer the case. Verify if you need these module and configure a polyfill for it.

If you want to include a polyfill, you need to install 'buffer'. If you don't want to include a polyfill, you can use an empty module like this: resolve.alias: { "buffer": false }

error Command failed with exit code 1.

My application is made in CRA and Typescript. This is my package.json:

I'm trying to make invisible react-google-recaptcha, Formik and yup to work together. The documentation says we should call recaptchaRef.current.execute() on form submission, but if we use Formik and yup together, it will trigger the submission logic only after all fields passed the validation schema.

Basically, we need to call the execute method, update the recaptcha value and submit the form with the same trigger event. My problem is exactly that: I'm having to use two events (one for the execute method and update the recaptcha + one to submit the form).

Check this sandbox: https://codesandbox.io/s/keen-mahavira-ont8z?file=/src/App.js

As you can see, the form is submitted only with the second click in the submit button...