React-google-login: Uncaught TypeError: Cannot read property 'load' of undefined

[Nfinished]

Experienced when using the hook like so:

/* useGoogleLogin.js */
import { useGoogleLogin } from 'react-google-login'

import config from 'config'

import { useActions, GoogleActions } from 'modules'

const SCOPES = [
  'email',
  'profile',
  'openid',
  //... a few more scopes
]

export default () => {
  const actions = useActions({
    googleLoginSuccess: GoogleActions.googleLoginSuccess,
    googleLoginPending: GoogleActions.googleLoginPending,
    googleLoginFailed: GoogleActions.googleLoginFailed,
  })

  return useGoogleLogin({
    clientId: config.GOOGLE_CLIENTID,
    cookiePolicy: 'single_host_origin',
    scope: SCOPES.join(' '),
    onSuccess: actions.googleLoginSuccess,
    onFailure: actions.googleLoginFailed,
    onRequest: actions.googleLoginPending,
  })
}

/* SomeComponent.js */
import useGoogleLogin from './useGoogleLogin.js'

const SomeComponent () => {
  const { signIn, loaded } = useGoogleLogin()

  if (!loaded) return null
  else return <button onClick={signIn}>Sign in</button>
}

The component version is being used elsewhere in the application without issue. Let me know what other information you need to debug.

[Nfinished]

Looks like gapi isn't defined when this line is hit.
https://github.com/anthonyjgrove/react-google-login/blob/master/src/use-google-login.js#L85

[sp-daniel-sanchez]

You've been able to solve the issue, @Nfinished ?

[Nfinished]

I have not.

[sp-daniel-sanchez]

I'll go with the GoogleLogin component and wait for the fix then, ty!

[zelardiel]

I had the same problem, and i have found the reason why this happens.

The hook does not by default set the jsSrc.
If you do the following it should work:

return useGoogleLogin({
    clientId: config.GOOGLE_CLIENTID,
    cookiePolicy: 'single_host_origin',
    scope: SCOPES.join(' '),
    onSuccess: actions.googleLoginSuccess,
    onFailure: actions.googleLoginFailed,
    onRequest: actions.googleLoginPending,
    jsSrc: 'https://apis.google.com/js/api.js'
  })

[Nfinished]

I had the same problem, and i have found the reason why this happens.

The hook does not by default set the jsSrc.
If you do the following it should work:

return useGoogleLogin({
    clientId: config.GOOGLE_CLIENTID,
    cookiePolicy: 'single_host_origin',
    scope: SCOPES.join(' '),
    onSuccess: actions.googleLoginSuccess,
    onFailure: actions.googleLoginFailed,
    onRequest: actions.googleLoginPending,
    jsSrc: 'https://apis.google.com/js/api.js'
  })

Thank you! This was the solution, I'll throw up a pr

[achtan]

pls push new version to npm

[anthonyjgrove]

done, v5.1.10

[BjoernRave]

I still have this problem. Do you think running this inside a chrome extension/iframe could be the reason?

[vaibhav1805]

@BjoernRave did you make it work inside the chrome extension? Even i'm struggling with the same.