react-social-login
react-social-login copied to clipboard
Unhandled Runtime Error(Google)
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
Are you using next.js? Also please specify react-social-login version being used.
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.
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
![image](https://user-images.githubusercontent.com/27556560/163950863-d6678079-f5eb-4e1d-abbf-9ba835f22495.png)
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.
@cpPratikParshuramChavan I got same error here. @deepakaggarwal7 I am using Next.js 12.0.8 with react-social login 3.4.7.
I've got same error.
NextJS 12.1.6 react-social-login ^3.4.15
Hi @deepakaggarwal7 , i am getting the same error. Versions used - NextJS: 12.2.3 react-social-login: 3.4.15
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.
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.
I've used this package for google login.
@react-oauth/google
That works well in NextJS
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.
i have the same issue in next js
only on localhost