'ReCAPTCHA' cannot be used as a JSX component.

[shyam-stha]

react-google-recaptcha version: 2.1.0
react-async-script version: Y.Y.Y

Type error: 'ReCAPTCHA' cannot be used as a JSX component.
Its instance type 'ReCAPTCHA' is not a valid JSX element.
The types returned by 'render()' are incompatible between these types.
Type 'import("/app/node_modules/@types/react-dom/node_modules/@types/react/ts5.0/index").ReactNode' is not assignable to type 'React.ReactNode'.
Type 'ReactElement<any, string | JSXElementConstructor>' is not assignable to type 'ReactNode'.
Property 'children' is missing in type 'ReactElement<any, string | JSXElementConstructor>' but required in type 'ReactPortal'.

[spietrek-insight]

Same error

[henriques4nti4go]

same error

[rdok]

Caused by latest version of @types/react: 18.2.28.

In my case reverting to last known working state 18.2.23 resolves (at least temporarily) the issue.

[davidgamez]

I found the same issue and applied the following workaround that fixed it: https://stackoverflow.com/a/75093164

[MadaShindeInai]

Same error! @types/react": "18.2.37

[127]

Same problem here in Remix 2.3.1 and TSX:
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-google-recaptcha": "^3.1.0",
recaptcha requires types to be imported
"@types/react-google-recaptcha": "^2.1.8",
import { ReCAPTCHA } from "react-google-recaptcha";
if imported like that fails:
import ReCAPTCHA from "react-google-recaptcha";

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
    at renderElement (/Users/localuser/testproject/node_modules/react-dom/cjs/react-dom-server.node.development.js:6109:9)
    at renderNodeDestructiveImpl (/Users/localuser/testproject/node_modules/react-dom/cjs/react-dom-server.node.development.js:6170:11)
    at renderNodeDestructive (/Users/localuser/testproject/node_modules/react-dom/cjs/react-dom-server.node.development.js:6142:14)
    at renderNode (/Users/localuser/testproject/node_modules/react-dom/cjs/react-dom-server.node.development.js:6325:12)
    at renderChildrenArray (/Users/localuser/testproject/node_modules/react-dom/cjs/react-dom-server.node.development.js:6277:7)
    at renderNodeDestructiveImpl (/Users/localuser/testproject/node_modules/react-dom/cjs/react-dom-server.node.development.js:6207:7)
    at renderNodeDestructive (/Users/localuser/testproject/node_modules/react-dom/cjs/react-dom-server.node.development.js:6142:14)
    at renderNode (/Users/localuser/testproject/node_modules/react-dom/cjs/react-dom-server.node.development.js:6325:12)
    at renderHostElement (/Users/localuser/testproject/node_modules/react-dom/cjs/react-dom-server.node.development.js:5708:3)
    at renderElement (/Users/localuser/testproject/node_modules/react-dom/cjs/react-dom-server.node.development.js:6018:5)

Looks like it doesn't even injects google recaptcha script element to DOM.
Inited like <ReCAPTCHA sitekey={ loaderData.rkey! } theme="dark" />

[127]

I found the same issue and applied the following workaround that fixed it: https://stackoverflow.com/a/75093164

Note: this one doesn't work for Remix 2.3.1

[eeshankeni]

Same here, tried installing @types/react-google-recaptcha but that didnt help

[127]

Same here, tried installing @types/react-google-recaptcha but that didnt help

Switched to react-google-recaptcha-ultimate. This package works.

[eeshankeni]

adding this to my tsconfig compiler options seems to have fixed the issue for now.

"paths": {
"react": [ "./node_modules/@types/react" ]
}

[Yaroslavpnts]

@127
react-google-recaptcha-ultimate this package deprecated, Did you find solution for react-google-recaptcha?

[Yaroslavpnts]

@eeshankeni
For me your variant didn't work, maybe you did some additional configurations?

[127]

@127 react-google-recaptcha-ultimate this package deprecated, Did you find solution for react-google-recaptcha?

yes, as recommended switched to "@google-recaptcha/react": "^1.0.1",

[jnasoy]

Does anyone figured out a solution without downgrading the react types? Adding the paths in config does not help as well

[fuchinoko]

is this package abandoned?

[127]

Looks like

[mrcMesen]

I fixed my issue by removing the yarn.lock file and node_modules folder and reinstall

[djpremier]

Hi, I managed to "solve" it by writing the typing locally.

react-google-recaptcha.d.ts

declare module "react-google-recaptcha" {
  import * as React from "react";

  interface ReCAPTCHAProps {
    sitekey: string;
    onChange?: (token: string | null) => void;
    grecaptcha?: object;
    theme?: "light" | "dark";
    type?: "image" | "audio";
    tabindex?: number;
    onExpired?: () => void;
    asyncScriptOnLoad?: () => void;
    onErrored?: () => void;
    stoken?: string;
    hl?: string;
    size?: "compact" | "normal" | "invisible";
    badge?: "bottomright" | "bottomleft" | "inline";
    isolated?: boolean;
  }

  class ReCAPTCHA extends React.Component<ReCAPTCHAProps> {
    reset(): void;
    execute(): void;
    executeAsync(): Promise<string | null>;
    getValue(): string | null;
    getWidgetId(): number | null;
  }

  export default ReCAPTCHA;
}

[resatyildiz]

adding this to my tsconfig compiler options seems to have fixed the issue for now.

"paths": { "react": [ "./node_modules/@types/react" ] }

I'm using with next.js v15, it works for me.

[bibashpoudel7]

add to the tsconfig.json

this will fix the issue

{
  "compilerOptions": {
    ...
    "paths": {
      "react": [ "./node_modules/@types/react" ]
    }
  }
}