[Google Sign In] JS Library throwing an error all of a sudden

[tidusjar]

Summary
We are using the https://accounts.google.com/gsi/client JS Client to render a Login With Google Button on our user interface.
We have been using this successfully for a very long time, all of a sudden a few days ago (around 27th July) the Google Button is not rendering with the following stack trace:

ERROR Error
    at _.$e (client:128:335)
    at new rp (client:227:3)
    at aq (client:246:34)
    at No (client:244:246)
    at Object.Oo [as renderButton] (client:216:62)
    at Pe.renderButton (main.b0501b3ff036f102.js:1:4820)
    at e.renderButton (866.e8e180033653210f.js:1:1040)
    at set googleClientId [as googleClientId] (866.e8e180033653210f.js:1:681)
    at wa (main.b0501b3ff036f102.js:1:652227)
    at xs (main.b0501b3ff036f102.js:1:653110)

Trying to look around it seems that I am not the only person experiencing this issue:
https://stackoverflow.com/questions/76796549/google-login-ui-crashing

This is happening also on multiple environments across my business.

Looks like removing the width property from the google.accounts.id.renderButton seems to fix it

e.g. issue:

    google.accounts.id.renderButton(buttonElement, {
      type: 'standard',
      theme: 'outline',
      size: 'large',
      width: '195',
      locale: 'en-us',
    });

Fixed:

    google.accounts.id.renderButton(buttonElement, {
      type: 'standard',
      theme: 'outline',
      size: 'large',
      locale: 'en-us',
    });

Browser(s)/Version(s)
All

Expected Behavior
Login with Google button should render

Actual Behavior
Login with Google button does not render

Steps to Reproduce
https://stackblitz.com/edit/stackblitz-starters-poqtnt?file=src%2Fmain.ts

[haru07]

I have also reported this issue at googlesamples/google-services#581 last week where the button won't render if you have set a width. The configurator also has the same issue. Other people have the same issue. Removing the width property will resolve the issue.

[areebhashir12]

put 'px' after 195
google.accounts.id.renderButton(buttonElement, {
type: 'standard',
theme: 'outline',
size: 'large',
width: '195px',
locale: 'en-us',
});

[haru07]

put 'px' after 195 google.accounts.id.renderButton(buttonElement, { type: 'standard', theme: 'outline', size: 'large', width: '195px', locale: 'en-us', });

The doc said to use something like width: '400' https://developers.google.com/identity/gsi/web/reference/js-reference#width and it has always work until several days ago. Other people got it to work even without the 'px' - https://stackoverflow.com/questions/76803838/google-sign-in-javascript-api-issue. If they updated the api, they should have at least update the doc and the configurator.

[chrisonline]

Have the same problem and if I add px to the width it works again.

[gomezhyuuga]

Same here, error started to happen on July 25 2023 on my side. Adding the px fixed it

[Melendez34]

This happen to us at work, using the debugger from Chrome, we found that theres a condition on that requires number type to the width so currently if you remove the '' sigle quotes the button is renders

shout-out @jcteo and all credit to him for that.

[yankovich]

btw https://accounts.google.com/gsi/client can return different client.js - with and without width value conversion for validation

maybe this is the cause of the error - if there is no block with a transform to check in the code, then any width value ('200'|'200px') will generate an error, because default width is of type String

now it's better not to specify the width at all