Android Bundling failed Unable to resolve "expo-auth-session" from "node_modules\@clerk\clerk-expo\dist\useOAuth.js":

Question

I have error after I add NavigationContainer and that's the error message :

Android Bundling failed 3758ms C:\My Work\React Native\First\node_modules\expo\AppEntry.js (876 modules) Unable to resolve "expo-auth-session" from "node_modules\@clerk\clerk-expo\dist\useOAuth.js"

This is my app.js :

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import Login from './Apps/Screens/LoginScreen/Login';
import { ClerkProvider,SignedIn, SignedOut  } from "@clerk/clerk-expo";
import { NavigationContainer } from '@react-navigation/native';
import * as SecureStore from "expo-secure-store";
import TabNavigation from './Apps/Navigations/TabNavigation';

const tokenCache = {
  async getToken(key) {
    try {
      return SecureStore.getItemAsync(key);
    } catch (err) {
      return null;
    }
  },
  async saveToken(key, value) {
    try {
      return SecureStore.setItemAsync(key, value);
    } catch (err) {
      return;
    }
  },
};

export default function App() {
  return (
    <ClerkProvider 
      publishableKey={'pk_test_ZGFzaGluZy1maXNoLTc0LmNsZXJrLmFjY291bnRzLmRldiQ'}
      tokenCache={tokenCache}
    >
      <View style={styles.container}>
          <SignedIn>
              <NavigationContainer>
                <TabNavigation/>
              </NavigationContainer>
          </SignedIn>
          <SignedOut>
              <Login/>
          </SignedOut>
          <StatusBar style="auto" />
      </View>
    </ClerkProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
});

And this is my navigations file :

import React from 'react'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Home from '../Screens/HomeSreen/Home';
import Profile from '../Screens/ProfileScreen/Profile';
import Booking from '../Screens/Booking/Booking';
const Tab = createBottomTabNavigator();
export default function TabNavigation() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="home" component={Home} />
      <Tab.Screen name="profile" component={Profile} />
      <Tab.Screen name="booking" component={Booking} />
    </Tab.Navigator>
  )
}

And package.json :

{
  "name": "first",
  "version": "1.0.0",
  "main": "expo/AppEntry.js",
  "scripts": {
    "start": "expo start --tunnel",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "@clerk/clerk-expo": "^1.1.4",
    "@react-native-community/datetimepicker": "8.0.1",
    "@react-navigation/bottom-tabs": "^6.5.20",
    "@react-navigation/native": "^6.1.17",
    "@react-navigation/native-stack": "^6.9.26",
    "@types/react": "~18.2.79",
    "expo": "~51.0.8",
    "expo-secure-store": "~13.0.1",
    "expo-status-bar": "~1.12.1",
    "expo-web-browser": "~13.0.3",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.74.1",
    "react-native-safe-area-context": "4.10.1",
    "react-native-screens": "3.31.1",
    "typescript": "~5.3.3"
  },
  "devDependencies": {
    "@babel/core": "^7.24.0"
  },
  "private": true
}

and this is my login file :

import { View, Text, Image, StyleSheet, TouchableOpacity } from 'react-native'
import React from 'react'
import Colors from '../../utils/Colors'
import * as WebBrowser from "expo-web-browser";
import { useOAuth } from "@clerk/clerk-expo";
import { useWarmUpBrowser } from '../../hooks/useWarmUpBrowser';

WebBrowser.maybeCompleteAuthSession();

export default function Login() {
  useWarmUpBrowser();
  const { startOAuthFlow } = useOAuth({ strategy: "oauth_google" });
  const onPress = React.useCallback(async () => {
    try {
      const { createdSessionId, signIn, signUp, setActive } =
        await startOAuthFlow();
      if (createdSessionId) {
        setActive({ session: createdSessionId });
      } else {
        // Use signIn or signUp for next steps such as MFA
      }
    } catch (err) {
      console.error("OAuth error", err);
    }
  }, []);
  
  return (
    <View style={{alignItems:'center'}}>
      <Image style={styles.loginImage} source={require('../../../assets/Images/image 13.png')}/>
      <View style={styles.subContainer}>
          <Text style={{fontSize:26,color:Colors.WHITE,textAlign:'center'}}>
              Let's Find 
              <Text style={{fontWeight:'bold'}}> professional cleaning and repair </Text>
              Service
          </Text>
          <Text style={{fontSize:17,color:Colors.WHITE,textAlign:'center',marginTop:20}}>Best way to Find services near you which deliver you professional service</Text>
          <TouchableOpacity style={styles.button} onPress={onPress}>
            <Text style={{fontSize:17,color:Colors.PRIMARY}}>Let's get started</Text>
          </TouchableOpacity>
      </View>
    </View>
  )

I'm trying to upgrade the CLI and change the versios of react and react native but i still have the same error

I'm new in React native

Answer 1

Try installing "expo-auth-session" manually with npm i expo-auth-session