react-social-login breaks when used with create-react-app v3.0.0

[yuchuan1]

Sample repo
Steps to reproduce.

1. npx create-react-app test-app
2. cd test-app
3. yarn add react-social-login
4. add SocialButton.js as stated in Usage
5. replace index.js with the index.js stated in Usage
6. replace app with root in index.js
7. yarn start

in Chrome, it shows error messages as following.

TypeError: Cannot read property 'render' of undefined
new n
node_modules/react-social-login/dist/social-login.js:4083
4080 | function n(e) {
  4081 |   i(this, n);
  4082 |   var r = o(this, (n.__proto__ || Object.getPrototypeOf(n)).call(this, e));
> 4083 |   return r.isStateless = !t.prototype.render, r.state = {
       | ^  4084 |     isLoaded: !1,
  4085 |     isConnected: !1,
  4086 |     isFetching: !1

in Firefox, the error message is as following.

TypeError: t.prototype is undefined
n
node_modules/react-social-login/dist/social-login.js:4083
 4080 | function n(e) {
  4081 |   i(this, n);
  4082 |   var r = o(this, (n.__proto__ || Object.getPrototypeOf(n)).call(this, e));
> 4083 |   return r.isStateless = !t.prototype.render, r.state = {
       | ^  4084 |     isLoaded: !1,
  4085 |     isConnected: !1,
  4086 |     isFetching: !1

[jangsi]

I get the same error with the example code. When I convert the example button from using a stateless component to extending React.Component, it works.

[yuchuan1]

I need to be able to use react hooks.

[devapurva]

@yuchuan1 hey did you get solution to this? I am facing the same issue.

[yuchuan1]

@devapurva
Since my new project only requires fb and google, I moved away from using this module.

[towfiqi]

So basically its broken.. :/

[yuchuan1]

@towfiqi
Someone gotta dig into the code and figure out a solution

[VimLeSai]

@yuchuan1, @jangsi so basically it's brokes when you use React Hooks or Functional Component, is that what happens?

[towfiqi]

It doesn't work with class components too.

[VimLeSai]

@towfiqi okay

[xzessmedia]

I get the same error with the example code. When I convert the example button from using a stateless component to extending React.Component, it works.

guys just read this :)
instead of using a stateless component create a class extending React.Component, just don't be lazy

Something like
`
class SocialLoginButton extends React.Component {

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

}

export default SocialLogin(SocialLoginButton);
`
Works like a charm!
I'm using semantic ui, so maybe you want to replace Button with button

[nesymno]

any updates for hooks?

[rgmagebit]

Still not usable with a functional component.

[deepakaggarwal7]

Can someone share a codesabdbox or similar demo for this issue? thanks

[dulguuned]

this is state issue, when everything is ready just show the socialbutton