'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