尝试解析模块“@react-native-community/google-signin”时出错

Posted 2023-03-08

【中文标题】尝试解析模块“@react-native-community/google-signin”时出错

【英文标题】：Error while trying to resolve module '@react-native-community/google-signin'

【发布时间】：2021-02-05 17:52:37

【问题描述】：

我在尝试将 Google 登录添加到我的应用时遇到了问题。我安装了最新版本的@react-native-community/google-signin 模块（v5.0.0）。我按照他们在文档中所说的做了一切，但是当我运行我的应用程序时，我收到以下错误：

error: Error: While trying to resolve module `@react-native-community/google-signin` from file `C:\Users\PC\Desktop\andrej\programming\react-native\FastFoodApp\app-screens\login.component.js`, the package `C:\Users\PC\Desktop\andrej\programming\react-native\FastFoodApp\node_modules\@react-native-community\google-signin\package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`C:\Users\PC\Desktop\andrej\programming\react-native\FastFoodApp\node_modules\@react-native-community\google-signin\index.js`. Indeed, none of these files exist:

  * C:\Users\PC\Desktop\andrej\programming\react-native\FastFoodApp\node_modules\@react-native-community\google-signin\index.js(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
  * C:\Users\PC\Desktop\andrej\programming\react-native\FastFoodApp\node_modules\@react-native-community\google-signin\index.js\index(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
    at ResolutionRequest.resolveDependency (C:\Users\PC\Desktop\andrej\programming\react-native\FastFoodApp\node_modules\metro\src\node-haste\DependencyGraph\ResolutionRequest.js:65:15)
    at DependencyGraph.resolveDependency (C:\Users\PC\Desktop\andrej\programming\react-native\FastFoodApp\node_modules\metro\src\node-haste\DependencyGraph.js:287:16)
    at Object.resolve (C:\Users\PC\Desktop\andrej\programming\react-native\FastFoodApp\node_modules\metro\src\lib\transformHelpers.js:267:42)
    at C:\Users\PC\Desktop\andrej\programming\react-native\FastFoodApp\node_modules\metro\src\DeltaBundler\traverseDependencies.js:434:31
    at Array.map (<anonymous>)
    at resolveDependencies (C:\Users\PC\Desktop\andrej\programming\react-native\FastFoodApp\node_modules\metro\src\DeltaBundler\traverseDependencies.js:431:18)
    at C:\Users\PC\Desktop\andrej\programming\react-native\FastFoodApp\node_modules\metro\src\DeltaBundler\traverseDependencies.js:275:33
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (C:\Users\PC\Desktop\andrej\programming\react-native\FastFoodApp\node_modules\metro\src\DeltaBundler\traverseDependencies.js:87:24)
    at _next (C:\Users\PC\Desktop\andrej\programming\react-native\FastFoodApp\node_modules\metro\src\DeltaBundler\traverseDependencies.js:107:9)

这是我的代码中负责登录的部分：

import React from 'react';
import SafeAreaView, StyleSheet from 'react-native';
import Button, Layout, Icon from '@ui-kitten/components';

import GoogleSignin from '@react-native-community/google-signin';
onGoogleButtonPress = async () => 
  const idToken = await GoogleSignin.signIn();
  const googleCredential = auth.GoogleAuthProvider.credential(idToken);
  return auth().signInWithCredential(googleCredential);
;

const GoogleIcon = (props) => <Icon name="google" ...props />;
GoogleSignin.configure(
  webClientId:
    'xxx.apps.googleusercontent.com',
);

export const LoginScreen = () => 
  return (
    <SafeAreaView style=styles.mainContainer>
      <Layout style=styles.contentContainer>
        <Button
          accessoryLeft=GoogleIcon
          onPress=() =>
            onGoogleButtonPress().then(() =>
              console.log('Signed in with Google!'),
            )
          >
          Sign in with Google
        </Button>
      </Layout>
    </SafeAreaView>
  );
;

const styles = StyleSheet.create(
  mainContainer: 
    display: 'flex',
    flex: 1,
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
  ,
  contentContainer: 
    display: 'flex',
    flex: 1,
    width: '100%',
    textAlign: 'center',
    alignItems: 'center',
    justifyContent: 'center',
  ,
);

任何想法为什么会发生这种情况？

更新： 当我继续使用 React Native 开发我的应用程序时，我遇到了很多这样的错误，其中包不起作用。这是我转向 Flutter 的原因之一。我开始使用 Flutter 已经一个月了，还没有遇到过这样的错误。它的包控制系统要好得多，非常稳定，包总是可以工作，而且非常简单！您甚至不必使用命令行！您只需将包名称（和版本）添加到您的 pubspec.yaml 文件中。我可以说 Flutter 很棒，我建议从 React Native 切换到 Flutter。

【参考方案1】：

@react-native-community/google-signin 该软件包已被弃用。但是你可以使用@react-native-google-signin/google-signin。

要安装，RN >= 0.60

npm i @react-native-google-signin/google-signin

yarn add @react-native-google-signin/google-signin

导入模块。

import 
  GoogleSignin,
  GoogleSigninButton,
  statusCodes,
 from '@react-native-google-signin/google-signin';

示例代码

// import statusCodes along with GoogleSignin
import  GoogleSignin, statusCodes  from '@react-native-google-signin/google-signin';

// Somewhere in your code
signIn = async () => 
  try 
    await GoogleSignin.hasPlayServices();
    const userInfo = await GoogleSignin.signIn();
    this.setState( userInfo );
   catch (error) 
    if (error.code === statusCodes.SIGN_IN_CANCELLED) 
      // user cancelled the login flow
     else if (error.code === statusCodes.IN_PROGRESS) 
      // operation (e.g. sign in) is in progress already
     else if (error.code === statusCodes.PLAY_SERVICES_NOT_AVAILABLE) 
      // play services not available or outdated
     else 
      // some other error happened
    
  
;