Error while trying to resolve module '@react-native-community/google-signin'

user_13646430 0
Viewed 1239

I just encountered a problem when I tried to add Google Sign in to my app. I installed the latest version of the @react-native-community/google-signin module (v5.0.0). I did everything like they said in the documentation but when I run my app I get the following error:

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)

Here is the part of my code that is responsible for logging in:

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',
  },
});

Any ideas why this might be happening?

UPDATE: As I continued my app's development using React Native I got many errors like this, where the packages don't work. That was one of thr reasons I switched to Flutter. It's been a month since I started using Flutter and haven't yet experienced any errors like this. It's package control system is much better, it's very stable, packages always work and it's very simple! You don't even have to use the command line! You just add the package name (and version) to your pubspec.yaml file. I can say that Flutter is amazing and I recommend switching from React Native to Flutter.

google-signin firebase-authentication firebase react-native node.js
1 Answers

@react-native-community/google-signin the package has been deprecated. however you can use @react-native-google-signin/google-signin.

to install, RN >= 0.60

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

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

to import modules.

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

Example Code

// 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
    }
  }
};
user_158493340
Related