What’s with random errors from Expo GO about a file not existing?

Currently, I’m coding with GPT-Pilot. Not sure how many of you have tried this. It’s fun.

However, on to my problem. What’s extremely frustrating is every now and then I run into an issue where even though I’ve imported a function, module, or component (whatever you want to call it), I get the error that the file doesn’t exist.

I’m trying to use “AuthProvider” from “AuthContext”

import React from 'react';
import AppNavigation from '../frontend/context/AppNavigation'
import { AuthProvider } from './context/AuthContext';
import { AuthContext } from './frontend/context/AuthContext';

function App() {
  console.log('Initializing App'); 
  return (
    <AuthProvider>
      <AppNavigation />
    </AuthProvider>
  );
}

export default App;

Also I’m quite a noob. So, I’m not 100% certain that this isn’t just some quick fix that I’m overlooking. Here’s the code for the AuthContext. Hopefully that helps

// AuthProvider.js
import React, { createContext, useContext, useState } from 'react';

export const AuthContext = createContext();

export const useAuth = () => useContext(AuthContext);

export const AuthProvider = ({ children }) => {
  const [role, setRole] = useState(null);

  const updateRole = async (newRole) => {
    try {
      console.log(`Updating role to ${newRole}`); // gpt_pilot_debugging_log
      setRole(newRole);
    } catch (error) {
      console.error('Failed to update role:', error.message, error.stack); // gpt_pilot_debugging_log
    }
  };

  return (
    <AuthContext.Provider value={{ role, updateRole }}>
      {children}
    </AuthContext.Provider>
  );
};

I’ve tried removing the wrapped tag around AppNavigation because I had another file that worked without it. That didn’t work. I’ve tried clearing the Expo cache, stopping the server and restarting it to no avail. I expected it to load into the syntax imported in the App.js however I get and error that AppNavigation doesn’t exist when the editor is even auto-completing the correct address. I’ve tried changing the directory.

Not sure what else I can do. I’m stuck. This is the file here, however Expo GO is saying it doesn’t exist.

import React, { useContext, useEffect, useState } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import LoginScreen from '../../VI_UBAH/frontend/screens/LoginScreen';
import RegisterScreen from '../../VI_UBAH/frontend/screens/RegisterScreen';
import DashboardScreen from '../../VI_UBAH/frontend/screens/DashboardScreen';
import EditProfileScreen from '../../VI_UBAH/frontend/screens/EditProfileScreen';
import MapScreen from '../../VI_UBAH/frontend/screens/MapScreen';
import LiveLocationScreen from '../../VI_UBAH/frontend/screens/LiveLocationScreen'; // Make sure to import LiveLocationScreen
import { ActivityIndicator, View } from 'react-native';
import { supabase } from '../../VI_UBAH/supabaseClient';
import RoleSelectionScreen from '../../VI_UBAH/frontend/screens/RoleSelectionScreen';

const Stack = createNativeStackNavigator();

const AppNavigation = () => {
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const [role, setRole] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    checkAuthStatus();
  }, []);

  const checkAuthStatus = async () => {
    try {
      console.log('Checking authentication status...');
      const { data: { session } } = await supabase.auth.getSession();
      if (session) {
        const { user } = session;
        const roles = user.user_metadata.roles; // Assuming roles are stored as an array in user_metadata
        setIsAuthenticated(true);
        console.log('Successfully authenticated:', !!session); // gpt_pilot_debugging_log
        console.log('User roles:', roles); // gpt_pilot_debugging_log
        setRole(roles);
      } else {
        setIsAuthenticated(false);
        console.log('User not authenticated.'); // gpt_pilot_debugging_log
      }
    } catch (error) {
      console.error('Failed to check authentication status:', error.message, error.stack); // gpt_pilot_debugging_log
    } finally {
      setLoading(false);
    }
  };

  if (loading) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <ActivityIndicator />
      </View>
    );
  }

  return (
    <NavigationContainer>
      <Stack.Navigator>
        {isAuthenticated && role ? (
          <>
            <Stack.Screen name="RoleSelect" component={RoleSelectionScreen} />
            <Stack.Screen name="Dashboard" component={DashboardScreen} />
            <Stack.Screen name="EditProfile" component={EditProfileScreen} />
            <Stack.Screen name="Map" component={MapScreen} />
            <Stack.Screen name="LiveLocation" component={LiveLocationScreen} /> 
          </>
        ) : (
          <>
            <Stack.Screen name="Login" component={LoginScreen} />
            <Stack.Screen name="Register" component={RegisterScreen} />
          </>
        )}
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default AppNavigation;