Objects are not valid as a React child Error

[EUGinsane]

Hi, 2 days ago, it works perfectly fine, but today I run my project again and this happens:

Objects are not valid as a React child (found: object with keys {$$typeof, render, displayName, propTypes, sitekey, onChange}). If you meant to render a collection of children, use an array instead.
in wrapWithAsyncScript (at LoginModal.js:152)
in div (at LoginModal.js:147)
in LoginModal (at Authentication.js:30)
in div (at Authentication.js:28)
in Authentication (created by Form(Authentication))
in Form(Authentication) (at App.js:8)
in App (at index.js:7)

I swear to God that I changed nothing since the day it worked. I tried to implement only the recaptcha in a new empty project and it still happens, here is my code:

<div>
  <ReCAPTCHA
    sitekey="My Code"
    onChange={() => {}}
  />
</div>

Is there anything wrong with the library ? I'm using React version 16.4.1

[DavidHollins6]

We are also having this issue on version 0.12.0. We upgraded the package to 1.0.0 but it seems to break because of a seperate issue with Enzyme Adapter 16.

[dozoisch]

@EUGinsane which version are you running?

[MeghaBambra]

I had the same issue - I was running an older version (0.14.0) but when updated to (1.0.0) the error was resolved. Hope this helps someone.

[dozoisch]

Ah found the issue, it's because it's using 1.0.0 from react-async-script instead of the pre 1.0 because the range was too vast.. I'll release a 0.14.1 to fix that.

In the mean time add "react-async-script": "0.11.1" if you are running < 1.0

[dozoisch]

Published 0.14.1 @TheDavinator @EUGinsane

[DavidHollins6]

That seems to have fixed that issue, thanks for the speedy reply!

However, I am now getting this.

I'm unsure if it's a "me" issue but it started occurring after updating to version 0.14.1.

[dozoisch]

Can you tell me which version of react-async-script is installed ?

[hartzis]

@dozoisch good find with react-async-ascript >=0.11.0 < 1.0 fix!

[LuisAverhoff]

I'm using react-async-script version ^0.11.1, react ^16.0.0 and react-google-captcha ^0.12.0 and I'm still getting this issue when I render this component as a child component.

  class GoogleReCaptcha extends React.Component< { verify },{ recaptchaResponse }> {
  constructor(props) {
    super(props)
  }
  public onChange(response) {
    this.setState({
      recaptchaResponse: response,
    })
    if (this.state.recaptchaResponse) {
      this.props.verify(response)
    }
  }
  public render() {
    return (
      <ReCAPTCHA
        sitekey={
          process.env.REACT_APP_RECAPTCHA_KEY
        }
        onChange={this.onChange.bind(this)}
      />
    )
  }
}

Any possible workarounds here?

[hartzis]

@LuisAverhoff i think this is related to #105. does the new v0.14.2 fix this?

[cbouvier15]

I just tried v0.14.2 and react-async-script version ^0.11.1 and it doesn't work 😞

[hartzis]

I got an example codesandbox.io running with 0.14.2 and not seeing these issues.

https://codesandbox.io/s/0qv560n87p

Could someone get an example repo/codesandbox running with this error so we can attempt to replicate and solve?

Some devs at my company did see something similar to this when the new versions got released and required a "refresh and rebuild", rm -rf node_modules && npm i type of thing, 🤷‍♀️

I'm starting to think these(Uncaught TypeError: Cannot call a class as a function/Objects are not valid as a React child Error) are due to miss alignment of versions between react-async-script and react-google-recaptcha...

[sookwei93]

  "react-google-recaptcha": "^0.14.0",
  "react-async-script": "0.11.0",

For me, this solved the issue.