ReactJS中gapi/react-google-login出现init未定义错误求助

在React应用中使用react-google-login组件，结合gapi与gapi-script实现谷歌登录功能，依赖版本：

• gapi@^0.0.3
• gapi-script@^1.2.0
• react-google-login@^5.2.2

页面加载时谷歌登录按钮无法渲染，控制台抛出以下错误：

login.js:65 Uncaught TypeError: Cannot read properties of undefined (reading 'init')
    at login.js:65:4
    at gapiScript.js:32:267
    at tb (gapiScript.js:24:468)
    at t (gapiScript.js:32:250)
    at m.<computed> (gapiScript.js:32:353)
    at F.<computed> [as loaded_0] (gapiScript.js:32:417)
    at cb=gapi.loaded_0:1:6
(anonymous) @ login.js:65
(anonymous) @ gapiScript.js:32
tb @ gapiScript.js:24
t @ gapiScript.js:32
m.<computed> @ gapiScript.js:32
F.<computed> @ gapiScript.js:32
(anonymous) @ cb=gapi.loaded_0:1


gapiScript.js:33 Uncaught TypeError: _.pk is not a function
    at cb=gapi.loaded_1:14:483
    at gapiScript.js:30:52
    at Yb (gapiScript.js:33:116)
    at Zb (gapiScript.js:29:489)
    at p (gapiScript.js:32:9)
    at t (gapiScript.js:32:242)
    at m.<computed> (gapiScript.js:32:353)
    at F.<computed> [as loaded_1] (gapiScript.js:32:417)
    at cb=gapi.loaded_1:1:6

相关代码：

useEffect(() => {
    const initClient = () => {
        gapi.client.init({
            clientId: clientId,
            scope: 'https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile'
        });
    };
    gapi.load('client:auth2', initClient);
},[]);

// ...

return(
    // ...
    <GoogleLogin        
        clientId='clientId'
        buttonText='Login/Signup with Google'           
        scope='https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile'
        onSuccess={handleLogin}
        onFailure={handleFailure}>
    </GoogleLogin>
    // ...
)

尝试给gapi.load添加超时处理无效，求解决方法。

1. 移除冲突依赖 #

react-google-login本身已封装谷歌登录的API加载逻辑，手动引入的gapi和gapi-script会和组件内置逻辑冲突，导致初始化混乱。执行命令卸载冗余依赖：

npm uninstall gapi gapi-script
# 或使用yarn
yarn remove gapi gapi-script

2. 简化代码，移除手动初始化逻辑 #

删除useEffect中所有gapi相关代码，仅保留GoogleLogin组件，组件会自动完成API加载与初始化：

// 仅保留GoogleLogin组件
return(
    // ...
    <GoogleLogin        
        clientId='你的真实ClientID'  // 替换为谷歌云平台获取的有效ClientID
        buttonText='Login/Signup with Google'           
        scope='https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile'
        onSuccess={handleLogin}
        onFailure={handleFailure}
        cookiePolicy={'single_host_origin'}  // 避免部分环境下的权限警告
    />
    // ...
)

3. 验证ClientID配置 #

确保使用的clientId是谷歌云平台OAuth 2.0客户端ID，且已将应用域名添加到OAuth同意屏幕的授权域名列表中。

4. 升级组件（可选） #

react-google-login@5.2.2为旧版本，已停止维护，可替换为官方推荐的@react-oauth/google：

npm uninstall react-google-login
npm install @react-oauth/google

新版组件使用示例：

import { GoogleLogin } from '@react-oauth/google';

// ...

<GoogleLogin
    onSuccess={credentialResponse => {
        console.log(credentialResponse);
        handleLogin(credentialResponse);
    }}
    onError={() => {
        console.log('Login Failed');
        handleFailure();
    }}
/>

内容的提问来源于stack exchange，提问作者Harshit Mawandia