keppelen / react-facebook-login

A Component React for Facebook Login
1.18k stars 406 forks source link

Error with next.js, Error: Uncaught Invariant Violation: Minified invariant #47458; #338

Open botolonltd opened 2 years ago

botolonltd commented 2 years ago

Our App was working just fine and for whatever reason ours apps are not working anymore. Whenever someone "Continues with facebook" we get this error.

Uncaught Invariant Violation: Minified invariant #47458; %s Params: %s
    at a (https://connect.facebook.net/en_US/sdk.js?hash=b1de252cd1fe2e2076e63d811f924aeb:67:366)
    at Object._ (https://connect.facebook.net/en_US/sdk.js?hash=b1de252cd1fe2e2076e63d811f924aeb:102:180)
    at Object.a [as execute] (https://connect.facebook.net/en_US/sdk.js?hash=b1de252cd1fe2e2076e63d811f924aeb:104:1337)
    at u (https://connect.facebook.net/en_US/sdk.js?hash=b1de252cd1fe2e2076e63d811f924aeb:105:827)
    at a.w [as graph] (https://connect.facebook.net/en_US/sdk.js?hash=b1de252cd1fe2e2076e63d811f924aeb:105:1606)
    at Object.a [as api] (https://connect.facebook.net/en_US/sdk.js?hash=b1de252cd1fe2e2076e63d811f924aeb:108:1780)
    at Object.<anonymous> (https://connect.facebook.net/en_US/sdk.js?hash=b1de252cd1fe2e2076e63d811f924aeb:73:838)
    at Object.api (https://connect.facebook.net/en_US/sdk.js?hash=b1de252cd1fe2e2076e63d811f924aeb:63:260)
    at t.n.responseApi (webpack-internal:///./node_modules/react-facebook-login/dist/facebook-login-with-button.js:1:2307)
    at n.checkLoginState (webpack-internal:///./node_modules/react-facebook-login/dist/facebook-login-with-button.js:1:2493)
    at a.__wrapper.a.__wrapper (https://connect.facebook.net/en_US/sdk.js?hash=b1de252cd1fe2e2076e63d811f924aeb:63:825)
    at https://connect.facebook.net/en_US/sdk.js?hash=b1de252cd1fe2e2076e63d811f924aeb:132:4721
    at Object._xdRecv (https://connect.facebook.net/en_US/sdk.js?hash=b1de252cd1fe2e2076e63d811f924aeb:155:14454)
    at https://connect.facebook.net/en_US/sdk.js?hash=b1de252cd1fe2e2076e63d811f924aeb:155:13867
    at s (https://connect.facebook.net/en_US/sdk.js?hash=b1de252cd1fe2e2076e63d811f924aeb:152:2241)
    at https://connect.facebook.net/en_US/sdk.js?hash=b1de252cd1fe2e2076e63d811f924aeb:152:2735
imam2nd commented 2 years ago

It is still happening...

Lazybon commented 2 years ago

Same problem

GxDesign commented 2 years ago

In case it helps anyone, Im using NextJS and decided to go custom after some bugs with this module. Im using the following code (where the client id is being fetched - you can also read from a local env var or hardcode it and not need a useCallback hook around the init function):

  const initFacebookSdk = useCallback(() => {
    // wait for facebook sdk to initialize before starting the react app
    window.fbAsyncInit = function () {
      window.FB.init({
        appId: FACEBOOK_OAUTH_CLIENT_ID,
        cookie: true,
        xfbml: true,
        version: "v12.0",
      });
    };

    // load facebook sdk script
    (function (d, s, id) {
      var js,
        fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) {
        return;
      }
      js = d.createElement(s);
      js.id = id;
      js.src = "https://connect.facebook.net/en_US/sdk.js";
      fjs.parentNode.insertBefore(js, fjs);
    })(document, "script", "facebook-jssdk");
  }, [FACEBOOK_OAUTH_CLIENT_ID]);

  useEffect(() => {
    initFacebookSdk();
  }, [initFacebookSdk]);

 const getToken = () => {
    window.FB.getLoginStatus(function (response) {
      console.log("FB status", response);
      if (response.status === "connected") {
        // The user is logged in and has authenticated your
        // app, and response.authResponse supplies
        // the user's ID, a valid access token, a signed
        // request, and the time the access token
        // and signed request each expire.
        const accessToken = response.authResponse.accessToken;
        return onToken(accessToken);
      } else {
        return login();
      }
    });
  };

  const login = () => {
    window.FB.login(
      function (response) {
        if (response.status === "connected") {
          const accessToken = response.authResponse.accessToken;
          return onToken(accessToken);
        } else {
          onError();
        }
      },
      { scope: "public_profile, email" }
    );
  };

// In my case, Im using a custom button and calling getToken as my onClick handler