React 19 compatibility

[felixhaeberle]

React 19 RC Compatibility Fix for react-google-recaptcha-v3

Issue

When using react-google-recaptcha-v3 with React 19 RC, the following error occurs:

Uncaught TypeError: (0 , reactWEBPACK_IMPORTED_MODULE_0.createContext) is not a function

This is happening because React 19 RC has stricter type checking for context creation, and the current implementation using createContext(null) is not compatible.

Current Implementation

const GoogleReCaptchaContext = createContext(null);

Proposed Fix

const GoogleReCaptchaContext = createContext<{
executeRecaptcha?: (action: string) => Promise<string>;
container?: HTMLElement;
}>({});

Changes

1. Adds proper TypeScript types for the context value
2. Initializes with an empty object instead of null
3. Makes the context values optional with ?

Benefits

• Maintains backward compatibility
• Adds proper TypeScript types
• Supports React 19 RC and future versions
• No breaking changes for existing users

Environment

{
"react": "19.0.0-rc-66855b96-20241106",
"react-google-recaptcha-v3": "^1.10.1",
"typescript": "^5"
}

Would you consider merging this change for the next release? This would help projects using React 19 RC while maintaining compatibility with older versions.

[miccou]

+1, this would help me. @t49tran can I submit a PR?

[GZTimeWalker]

Waiting for update, thanks!

[avlaguta]

We need React 19 support. Thanks!

[IdecEddy]

Would love React 19 support this is the only package holding me back from making the upgrade :)

[danielmintz]

Be great to get this compatibility with React 19 sorted

[luasenvy]

i created temporary migration code with Next.js 15 and React 19.

When loading the script without specifying ?render=${SITE_KEY}, an error appears indicating that the sitekey has not been properly loaded when calling execute(). The same issue occurred even when loading with explicit.

This suggests that attempts to use render() with the inline badge were unsuccessful, i think does not support this feature in v3. I hope this helps.

"use client";

import { useEffect, useRef } from "react";

interface GRecaptcha {
  ready: (callback: () => void) => void;
  execute: (sitekey: string, options: { action: string }) => Promise<string>;
}

const scriptId = "grecaptcha-v3";
const SITE_KEY = "MY_SITE_KEY";
const ACTION = "MY_ACTION";

export default function TestPage() {
  const grecaptchaRef = useRef<GRecaptcha>(null);

  useEffect(() => {
    let script = document.querySelector(`#${scriptId}`) as HTMLScriptElement;
    if (!Boolean(script)) {
      script = document.createElement("script");
      script.id = scriptId;
      script.src = `https://www.google.com/recaptcha/api.js?render=${SITE_KEY}`;

      script.defer = true;
      script.async = true;

      script.addEventListener("load", function () {
        const { grecaptcha } = window as any
        grecaptcha?.ready(() => {
          grecaptchaRef.current = grecaptcha;
        })
      });

      document.head.appendChild(script);
    }

    return () => {
      script.remove();
      document.querySelector(".grecaptcha-badge")?.parentElement?.remove();
      (window as any).___grecaptcha_cfg = undefined;
    };
  }, []);

  const handleSubmit = async () => {
    if (!grecaptchaRef.current) throw new Error("recaptcha is not loaded.");

    const token = await grecaptchaRef.current.execute(SITE_KEY, { action: ACTION })

    if (!token) throw new Error("Token is empty");

    // your codes with token...
  }

  return (
    <Button type="button" onClick={handleSubmit}>
      Submit
    </Button>
  )
}

[ldelia]

Is the package abandoned? Have any of you guys found a substitute package that supports React 19?

[ldelia]

Is the package abandoned? Have any of you guys found a substitute package that supports React 19?

I just moved to this package and can confirm that it works like a charm

https://github.com/snelsi/next-recaptcha-v3

[GZTimeWalker]

I see an active fork: 18thletter/react-google-recaptcha-v3.

Adopting snelsi/next-recaptcha-v3 is costly for me, as I don't use next.

Any other solution?

[wojtekmaj]

@GZTimeWalker Here's my rewrite that addresses several issues including this one: https://github.com/wojtekmaj/react-recaptcha-v3 We're starting to use it in one very large company in both pure React and Next.js projects, so I expect it will remain sustainable.