Getting error after the last release

[DevVanilli]

Getting rendering error since the last release (React + Vite). Had to temporarily hide the component.

Uncaught Error at _.$e (client:128:335) at new sp (client:227:3) at bq (client:246:34) at Oo (client:244:246) at Object.Po [as renderButton] (client:216:62) at index.esm.js:91:224 at commitHookEffectListMount (react-dom.development.js:23150:26) at commitPassiveMountOnFiber (react-dom.development.js:24926:13) at commitPassiveMountEffects_complete (react-dom.development.js:24891:9) at commitPassiveMountEffects_begin (react-dom.development.js:24878:7)

[DevVanilli]

Issue solved by making the width property a number instead of string. However I had to disable type check, otherwise was getting an error that the module won't accept width as a number.

[Jagat-Brilworks]

@DevVanilli can you please add a snippet.

[DevVanilli]

BEFORE:

<GoogleLogin width="311" onSuccess={async (resp) => {
                                    if (!!resp.credential) {
                                        await signInGoogle(resp.credential);
                                    }
                                }}
                                             onError={() => {
                                                 toast.error("Failed to sign in with Google");
                                             }}
                                />

NOW:

<GoogleLogin width={311} onSuccess={async (resp) => {
                                    if (!!resp.credential) {
                                        await signInGoogle(resp.credential);
                                    }
                                }}
                                             onError={() => {
                                                 toast.error("Failed to sign in with Google");
                                             }}
                                />

[Jagat-Brilworks]

@DevVanilli Thank you!

[Captain1653]

@DevVanilli Thank you !

[klimeryk]

Thank you, you've saved my sanity - the error from Google is extremely vague and cryptic. Thank you for reporting it and documenting the fix/workaround! 💖

[bryceAebi]

Thanks... my login was totally broken

[ines-b]

According to the last deployment here, both string and number should be allowed to set the width... I still had to change my width from string to number, otherwise it wouldn't work. Thank you for the suggestion @DevVanilli!

[IlyaIzr]

Confirming, crashed my app too Now i will only use strict npm versions

[IlyaIzr]

According to the last deployment here, both string and number should be allowed to set the width... I still had to change my width from string to number, otherwise it wouldn't work. Thank you for the suggestion @DevVanilli!

I mean yeah, I only see type was added - https://github.com/MomenSherif/react-oauth/commit/cb2a8ceb7cad2d44dbaf4e0320b4a45bbaec683e how could that crashed the library... maybe some lib dependencies crashed?

[MomenSherif]

The issue was from Google gsi script

https://github.com/metabase/metabase/issues/32602

[ryanpram]

Thankyouuu! @DevVanilli

[brettmhammond]

Highly recommend reverting this fix as it is causing complete app crashes as did ours for something so small but yet so consequential. You have over 140k downloads a week. This is a problem!

[qtnemo]

Is it possible to use try/catch when rendering the component so at least the button won't show up instead of crashing the whole page? I encase the render code in a try/catch block but the page still crashes.

[zixiliuyue]

https://developers.google.com/identity/gsi/web/reference/js-reference?hl=zh-cn#width

Fuck Google's Mom Bitch

[MrBartusek]

Is it possible to use try/catch when rendering the component so at least the button won't show up instead of crashing the whole page? I encase the render code in a try/catch block but the page still crashes.

Yup, just made PR for that #287

[SmitharyZach]

@MrBartusek MY MAN!

[Fransferdy]

For those asking how to handle this kind of error with react without crashing the whole page: This is my class for absorbing component errors

import React, { Component } from 'react';


class ErrorJSXCatcher extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // You can also log the error to an error reporting service
    console.log(error,errorInfo);
    //logErrorToMyService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <div>Something went wrong.</div>;
    }

    return this.props.children; 
  }
}

export default ErrorJSXCatcher;

You can just wrap google login with it:

<ErrorJSXCatcher>
        <GoogleOAuthProvider clientId="">
          <GoogleLogin />
         </GoogleOAuthProvider>
</ErrorJSXCatcher>

With this, instead of the component crashing the whole page, it only crashes the component and puts a different(place holder) component in its place. You could even wrap all of your components in it, instead of a div.

[DivyanshChaudhary17]

Hi Guys, I just read the issues and saw that for some reason developers changed the type of width property. and it suddenly stop working on production website of ours. I am not sure how the package versions are managed after making changes on library but a small advice if you have made any changes than it should reflect in newer version not in existing version my react application crashed on production and stage as well. even i didn't update the version of library.

[MomenSherif]

@DivyanshChaudhary17 because Google's gsi script changed automatically for some regions

You can find useLoadGsiScript which requests google auth library changed from google side

[MomenSherif]

@brettmhammond changes the width property from string to number in some regions is done by Google side, this library is just a small wrapper around it