gapi is not defined when loading React Component

Question

I am trying to integrate Google Sign In (link) using React.
I found a question that has solved this in past Using google sign in button with react 2

I replicated the same steps as mentioned. In my index.html I do

<script src="https://apis.google.com/js/platform.js?onload=triggerGoogleLoaded" async defer></script>
    <script type="text/javascript">
        function triggerGoogleLoaded() {
            console.log("google event loaded");
            window.dispatchEvent(new Event('google-loaded'));
        }
    </script>

Then my Component looks like

var LoginButton = React.createClass({

    onSignIn: function(googleUser) {
        console.log("user signed in"); // plus any other logic here
    },

    renderGoogleLoginButton: function() {
        console.log('rendering google signin button');
        gapi.signin2.render('my-signin2', {
            'scope': 'https://www.googleapis.com/auth/plus.login',
            'width': 200,
            'height': 50,
            'longtitle': true,
            'theme': 'light',
            'onsuccess': this.onSignIn
        })
    },

    componentDidMount: function() {
        window.addEventListener('google-loaded',this.renderGoogleLoginButton);
    },

    render: function() {
        let displayText = "Sign in with Google";
        return (
            <div class="g-signin2" data-onsuccess="onSignIn"></div>
        );
    }

});

export default LoginButton;

When I run the program using yarn start, I get

/Users/Harit.Himanshu/bl/sources/webs/google-login/src/LoginButton.js
  11:9   error    'gapi' is not defined                             no-undef
  26:13  warning  'displayText' is assigned a value but never used  no-unused-vars

✖ 2 problems (1 error, 1 warning)

The complete source code is available at https://github.com/hhimanshu/google-login-with-react

Could someone please help me understand my mistake?

Thanks

Steve Cooper · Accepted Answer · 2017-05-03 05:04:20Z

26

It looks to me like you're loading the google apis as a script tag, which we'd expect to set window.gapi to the google api. However, you're then running eslint or some other checker, and that has no idea that window.gapi is supposed to exist. It's failing because it sees you using an undeclared variable.

A cheap fix is to tell Eslint that you know what you are doing;

/* global gapi */

Put this at the top of your file and eslint will treat gapi as a known global variable.

answered May 3, 2017 at 5:04

Steve Cooper

21.6k17 gold badges75 silver badges90 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

daydreamer Over a year ago

Thanks @steve, this has helped me to get get the button, now I am stuck with stackoverflow.com/questions/43767485/…, do you know where am I making mistake?

Giang Le · Accepted Answer · 2018-05-17 14:55:37Z

5

This worked for me. Put it in componentDidMount or constructor:

componentDidMount() {
    window.gapi.load('auth2', () => {
        // Retrieve the singleton for the GoogleAuth library and set up the client.
        this.auth2 = window.gapi.auth2.init({
            client_id: '436676563344-.apps.googleusercontent.com',
            cookiepolicy: 'single_host_origin',
        });

        this.auth2.attachClickHandler(this.refs.googleButton, {},
            (googleUser) => {
                this.googleLogin(googleUser.getBasicProfile());
            }, (error) => {

            });
    });
}

edited May 17, 2018 at 14:55

answered May 3, 2017 at 5:18

Giang Le

7,1294 gold badges29 silver badges28 bronze badges

4 Comments

Rbar Over a year ago

I still get the OP's error (Uncaught ReferenceError: gapi is not defined) with this. Are you defining gapi somewhere?

Giang Le Over a year ago

does you put <script src="apis.google.com/js/platform.js?onload=triggerGoogleLoaded" async defer></script> before your script ?

Bomber Over a year ago

Do you know how I can get the gapi to work with react-native?

Giang Le Over a year ago

@Bomber sorry, but i don't know :(

Lucas Andrade · Accepted Answer · 2019-07-17 20:58:31Z

5

You can also try the package gapi-script, this package provides the gapi instantly, so you don't have to wait any script to load, just import it and use:

import { gapi } from 'gapi-script';

answered Jul 17, 2019 at 20:58

Lucas Andrade

4,6285 gold badges33 silver badges53 bronze badges

3 Comments

jantobola Over a year ago

Not a good solution since gapi script is updated by Google dynamically and this is just a hard copy of the script. You can end up with an outdated version of the script and your application may stop working.

Lucas Andrade Over a year ago

Yes that's true and I agree with you, I don't recommend this package for companies and enterprise projects, only to small projects to study and etc.

Lucas Andrade Over a year ago

The package was updated, now there is a function to download and use the real script from google's link.

Yang · Accepted Answer · 2020-02-04 03:40:15Z

2

Make sure that you’re not using async defer, which will cause race conditions between window.gapi.someMethod() and your script loading

In short, remove async defer from your script tag in your index.html.

before

<script src="https://apis.google.com/js/platform.js?onload=triggerGoogleLoaded" async defer></script>

after

<script src="https://apis.google.com/js/platform.js?onload=triggerGoogleLoaded"></script>

answered Feb 4, 2020 at 3:40

Yang

1,0489 silver badges10 bronze badges

Comments

Meloman · Accepted Answer · 2020-10-13 09:44:56Z

0

I had a simillar issue.

I use 'react-snap' for SEO. It blocked me to use 'gapi'. I found navigator.userAgent 'ReactSnap'.

if (navigator.userAgent !== 'ReactSnap') {
    // some code to dynamically load a script
    let myScript = document.createElement('script')
    myScript.setAttribute('src', 'https://apis.google.com/js/platform.js')
    document.body.appendChild(myScript)
}

I solved a problem. It works very well.

edited Oct 13, 2020 at 9:44

Meloman

3,7743 gold badges43 silver badges52 bronze badges

answered Oct 13, 2020 at 9:09

imki123

681 silver badge7 bronze badges

Comments

Deadjim · Accepted Answer · 2024-02-09 14:51:34Z

This workout helped me(place this code in index.html above main scripts):

    <script type="text/javascript">
      let tokenClient; // here you can pass client token after authentication
      let gapiInited = false;
      let gisInited = false;

      /**
       * Callback after api.js is loaded.
       */
      function gapiLoaded() {
        gapi.load("client", initializeGapiClient);
      }

      /**
       * Callback after the API client is loaded. Loads the
       * discovery doc to initialize the API.
       */
      async function initializeGapiClient() {
        gapiInited = true;
      }

      /**
       * Callback after Google Identity Services are loaded.
       */
      function gisLoaded() {
        gisInited = true;
      }
    </script>
    <script async defer src="https://apis.google.com/js/api.js" onload="gapiLoaded()"></script>
    <script async defer src="https://accounts.google.com/gsi/client" onload="gisLoaded()"></script>

Collectives™ on Stack Overflow

gapi is not defined when loading React Component

6 Answers 6

1 Comment

4 Comments

3 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

4 Comments

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related