snelsi/next-recaptcha-v3

reCaptcha script is loaded twice

Closed this issue · 1 comments

Describe the bug
A clear and concise description of what the bug is.

When the provider is connected and the page is loaded, the Google Recaptcha script is being loaded twice. That slows down the website performace and is visible in metrics reports. The issue occurs in both Development and Production.

To Reproduce
Steps to reproduce the behavior:

  1. Integrate Recaptcha as per the docs (wrapping the app into the provider).
    'use client'
    
    import { ReactNode } from 'react'
    import { ThemeProvider } from 'next-themes'
    import { ReCaptchaProvider } from 'next-recaptcha-v3'
    
    type Props = {
      children: ReactNode
    }
    
    export default function Providers({ children }: Props) {
      return (
        <ThemeProvider enableSystem attribute="class">
          <ReCaptchaProvider
            id="google-recaptcha-load"
            strategy="afterInteractive"
            reCaptchaKey={process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY}
          >
            {children}
          </ReCaptchaProvider>
        </ThemeProvider>
      )
    }
  2. Run "npm dev".
  3. See the Network requests.

Expected behavior
A clear and concise description of what you expected to happen.

The script is loaded once.

Screenshots
If applicable, add screenshots to help explain your problem.

Screenshot 2023-10-06 at 09 55 22 Screenshot 2023-10-06 at 09 52 31 Screenshot 2023-10-06 at 09 59 08

Desktop (please complete the following information):

  • OS: macOS 13.5.2
  • Browser: Firefox 118.0.1, Safari 16.6
  • Version: v1.2.0

Additional context
Add any other context about the problem here.

It's just something that reCaptcha does internaly for some reason 🤷‍♀️

google/recaptcha#236
google/recaptcha#415
google/recaptcha#331

It adds recaptcha__en.js script 2 times. Once in the head, and once inside of the grecaptcha-badge iframe's body.
Nothing we can do on our side, sadly.