Can't wrap arrow functions

[koszta]

It gives

TypeError: Cannot read property 'render' of undefined

The problem is that arrow functions don't have a prototype and therefore the stateless component test throws TypeError.

see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

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

[deepakaggarwal7]

Could you please share sample code? I agree that prototype isn't available for arrow functions, but I created one which worked. If you share your breaking usage, I might be able to fix it sooner.

[bobbyrinaldy]

same for me on nextjs, here's the following component that i created

import { FC, ReactNode } from 'react';
import SocialLogin from 'react-social-login';

type ISocialButtonProps = {
  children: ReactNode;
  props: any;
  triggerLogin: any;
};

const SocialButton: FC = (props: ISocialButtonProps) => {
  const { triggerLogin, children, ...otherProps } = props;
  return (
    <button onClick={triggerLogin} {...otherProps}>
      {children}
    </button>
  );
};

export default SocialLogin(SocialButton);

code above throw me an error :

TypeError: Cannot read property 'render' of undefined

which coming from this line of code:

// node_modules/react-social-login/dist/social-login.js line 979
_this.isStateless = !WrappedComponent.prototype.render;

[bobbyrinaldy]

i did converting my Arrow function to a Class component, and its working.
i think yes its because arrow function did not have any prototype, maybe you should adding another condition when people using an arrow function instead of class component

here's the code , maybe someone in future needed it.

import React, { Component, ReactNode } from 'react';
import SocialLogin from 'react-social-login';

type ISocialButtonProps = {
  children: ReactNode;
  props: any;
  triggerLogin: any;
};

export class SocialButton extends Component<ISocialButtonProps> {
  render() {
    return (
      <button onClick={this.props.triggerLogin} {...this.props}>
        {this.props.children}
      </button>
    );
  }
}

export default SocialLogin(SocialButton);