reCAPTCHA has already been rendered in this element

[eltonfms]

Question

There is an error in one of the promises, but no treatment was done to deal with the error: Uncaught (in promise) Error: reCAPTCHA has already been rendered in this element.

Version: 1.10.0 Browser: Chrome/104.0.5112.81 File: google-recaptcha-provider.tsx

104 clientId.current = grecaptcha.render(container?.element, params);

App Context Provider

import { GoogleReCaptchaProvider } from 'react-google-recaptcha-v3'

const AppProviders: FC<AppProvidersProps> = ({ children }) => {
  const container = useMemo(() => {
    const element = document.querySelector(
      '#recaptcha'
    ) as HTMLElement

    const config: GReCapProvContainerProps = {
      element,
      parameters: {
        badge: 'bottomright'
      }
    }

    return config
  }, [])

  return (
    <GoogleReCaptchaProvider
      reCaptchaKey={process.env.GOOGLE_RECAPTCHA_KEY}
      container={container}
    >
      {children}
    </GoogleReCaptchaProvider>
  )
}

Steps to reproduce

• Every time the react component is rendered the error alert occurs in console.
• If the container attribute in GoogleReCaptchaProvider is removed, the error does not occur.

[blekmus]

I've been using this in a Nextjs setup. This error occurs when I'm in development mode. When I build and serve the application, there's no problem. The error is not given and the captcha widget attaches itself to the element.

[nifanic]

Having the same issue when trying to define container prop.

👉🏻 Can't container.element be dynamic at all?

Otherwise, the prop doesn't make sense since DOM is yet to be ready when the GoogleReCaptchaProvider is triggered.

[TvojTatk0]

I have the very same issue. Error is happening because of Strict mode which should not be ignored. At the and I decided to not use recaptcha badge at all. See https://developers.google.com/recaptcha/docs/faq#id-like-to-hide-the-recaptcha-badge.-what-is-allowed

[alexiuscrow]

I have the very same issue. Error is happening because of Strict mode which should not be ignored. At the and I decided to not use recaptcha badge at all. See https://developers.google.com/recaptcha/docs/faq#id-like-to-hide-the-recaptcha-badge.-what-is-allowed

The best solution for me. From a design perspective, this solution can look much better than using a badge.

[jobe451]

Same issue here with nextJs