Unhandled Runtime Error(Google)

[cpPratikParshuramChavan]

Hello All, I'm getting this error after updating my outdated packages. See the below code for implementation.

One more thing, If I remove the google button code then this issue doesn't appear. for other buttons this issue is not appearing

// login.js
<SocialButton
    provider='google'
    appId={process.env.customKey.GOOGLE_APP_ID}
    onLoginSuccess={this.handleSocialLoginSubmit}
    onLoginFailure={this.handelLoginFail}
    key={`google${socialLoginReset}`}
    className="btn google-btn"
    role="button"
> Google</SocialButton>

// SocialButton.js
import React from 'react';
import SocialLogin from 'react-social-login';
class SocialButton extends React.Component {
	render() {
		const { triggerLogin, ...props } = this.props;

		return (
			<button onClick={triggerLogin} {...props}>
				{this.props.children}
			</button>
		);
	}
}

export default SocialLogin(SocialButton);

Thanks

[deepakaggarwal7]

Are you using next.js? Also please specify react-social-login version being used.

[deepakaggarwal7]

Also, if you can do a json.stringify of what the error is, it will be easier. I tried to fail the program through several ways, but didn't come across this error.

[kurroo10]

Are you using next.js? Also please specify react-social-login version being used.

hi there, your button is worked with nextjs ? because i dont. getting below errors

[ewinata]

Error seems to come from this line of code: from https://github.com/deepakaggarwal7/react-social-login/blob/master/src/index.js, line 47

 constructor (props) {
    super(props)

    this.isStateless = !WrappedComponent.prototype.render // HERE

    this.state = {
      isLoaded: false,
      isConnected: false,
      isFetching: false
    }

I tried adding a conditional statement into: this.isStateless = WrappedComponent.prototype && !WrappedComponent.prototype.render; And now next.js can successfully build it.

[thiefjim]

@cpPratikParshuramChavan I got same error here. @deepakaggarwal7 I am using Next.js 12.0.8 with react-social login 3.4.7.

[hc0503]

I've got same error.

NextJS 12.1.6 react-social-login ^3.4.15

[krishna-sharma-dev]

Hi @deepakaggarwal7 , i am getting the same error. Versions used - NextJS: 12.2.3 react-social-login: 3.4.15

[deepakaggarwal7]

Please check this https://codesandbox.io/s/serene-http-k3tf5 working nextjs example. Let me know if it helps? If it help you fix, please share the details in this thread.

[MGBR]

I'm getting this same issue. It's coming from this spot in dist/social-login.js:

https://github.com/deepakaggarwal7/react-social-login/blob/cc770b45fd089b00c1990ae0bd8efa5258fb1888/dist/social-login.js#L4069

When hasCanceled_ is true and the Promise is rejected. The reason it displays as Error: [object object] is because the message passed to new Error() is an object rather than a string.

It would be nice to make this a more read-able error rather than the cryptic object that can't be read in error messages.

It looks like cancel is only called inside the componentWillUnmount method:

https://github.com/deepakaggarwal7/react-social-login/blob/cc770b45fd089b00c1990ae0bd8efa5258fb1888/src/index.js#L130

@deepakaggarwal7 Is there a reason for the error being an object { isCanceled: true } rather than a string?

I know the standard with eslint is to reject with an Error, but in this case with the way this is being used I wonder if that's really necessary? I can't think of a use case where "cancelling" the Promise chain because the component un-mounts would need to result in an error being thrown. Or where that would be desirable.

[hc0503]

I've used this package for google login. @react-oauth/google That works well in NextJS

[deepakaggarwal7]

Hi @deepakaggarwal7 , i am getting the same error. Versions used - NextJS: 12.2.3 react-social-login: 3.4.15

I updated the sandbox to use exact same version but it is working. Can you host a quick failing sandbox, so that I can fix it?

this.isStateless = WrappedComponent.prototype && !WrappedComponent.prototype.render;

I will apply this fix.

[riyazpanarwala]

i have the same issue in next js

[dulguuned]

only on localhost