React-Native - TypeError: undefined is not an object evaluating useContext

Question

useContext works fine here, the console.log right before the screen change works as expected and gives me the user object (just copy/pasted the relevant info to save you time)

import React, { useContext, useState, useEffect } from "react";
import { AuthContext } from "./AuthProvider";

const Routes = () => {


const { user, setUser } = useContext(AuthContext);
  const [initializing, setInitializing] = useState(true);

  const onAuthStateChanged = (user) => {
    setUser(user);
    if (initializing) setInitializing(false);
  };

  useEffect(() => {
    const subscriber = auth().onAuthStateChanged(onAuthStateChanged);
    return subscriber; //unsub @ unmount
  }, []);

  if (initializing) {
    return null;
  }
  // console.log(user) //we have access to the user obj here w/out issues
  return (
    <NavigationContainer>
      {user  ? <AppStack /> : <AuthStack />} {* we have access to the user obj here w/out issues *}
    </NavigationContainer>
  );
};

Assuming the user Obj exists (which it does after sign-in occurs at least once), we jump into the AppStack. Then everything explodes. (I copy/pasted the only relevant info to save you time)

import React, { useContext, useState } from "react";
import {AuthProvider} from "./AuthProvider";


export default function AppStack({ navigation }) {
  const {user} = useContext(AuthProvider);
  
  console.log(user)



 return (
    <View style={styles.container}>
      <Drawer.Navigator
        headerMode="none"
        drawerContent={(props) => <DrawerContent {...props} />}
      >
        <Drawer.Screen name="Please" component={MainTabScreen} />
        <Drawer.Screen name="Help" component={MapScreen} />
        <Drawer.Screen name="thisIssue" component={ProfileScreen} />
        <Drawer.Screen name="isKillingMeSlowly" component={MainTabScreen} />
      </Drawer.Navigator>
    </View>
  );
  // }
}

stylesheet.create blahblahblah

The error is being caused by this line ---> const {user} = useContext(AuthProvider); This is the error:

TypeError: undefined is not an object (evaluating '_useContext.user')

Things I've changed in an attempt to fix this error:

remove {} from AuthContext import on both Routes && AppStack
Add {} to AuthContext import on both Routes && AppStack
remove {} from user in AppStack
re-install packages
clean npm cache
re-clone the repo
cry

I saw a post suggesting that it might be an issue with React-Native, but it was for a different version of React-Native than I'm using.

Here's my (enormous) package.json

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject",
    "test": "jest --watchAll"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@ant-design/icons": "^4.2.1",
    "@expo/vector-icons": "^10.0.0",
    "@mdi/js": "^5.3.45",
    "@mdi/react": "^1.4.0",
    "@react-native-community/async-storage": "~1.12.0",
    "@react-native-community/masked-view": "0.1.10",
    "@react-native-firebase/app": "^10.1.0",
    "@react-native-firebase/auth": "^9.2.3",
    "@react-native-firebase/database": "^7.2.7",
    "@react-navigation/bottom-tabs": "^5.3.1",
    "@react-navigation/drawer": "^5.8.5",
    "@react-navigation/material-bottom-tabs": "^5.2.15",
    "@react-navigation/native": "^5.7.0",
    "@react-navigation/stack": "^5.2.16",
    "expo": "^39.0.5",
    "expo-asset": "~8.2.0",
    "expo-constants": "~9.2.0",
    "expo-facebook": "~9.0.0",
    "expo-font": "~8.3.0",
    "expo-linear-gradient": "~8.3.0",
    "expo-linking": "^1.0.1",
    "expo-splash-screen": "~0.6.2",
    "expo-status-bar": "~1.0.2",
    "expo-web-browser": "~8.5.0",
    "firebase": "7.9.0",
    "npm": "^6.14.8",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-39.0.3.tar.gz",
    "react-native-animatable": "^1.3.3",
    "react-native-appearance": "~0.3.3",
    "react-native-fontawesome": "^7.0.0",
    "react-native-gesture-handler": "~1.7.0",
    "react-native-ionicons": "^4.6.5",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-maps": "0.27.1",
    "react-native-onboarding-swiper": "^1.1.4",
    "react-native-paper": "^4.2.0",
    "react-native-reanimated": "~1.13.0",
    "react-native-safe-area-context": "3.1.4",
    "react-native-screens": "~2.10.1",
    "react-native-vector-icons": "^7.0.0",
    "react-native-web": "~0.13.7",
    "react-navigation": "^4.4.0",
    "rn-toggle-switch": "^1.0.2",
    "styled": "^1.0.0",
    "styled-components": "^5.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.8.6",
    "babel-preset-expo": "^8.3.0",
    "jest-expo": "^39.0.0"
  },
  "private": true
}

Here's a screenshot of the error:

Answer 1

Despite checking it at least 10 different times I missed that I was importing AuthProvider instead of AuthContext from AuthProvider.js.

Fix:

original: import {AuthProvider} from "./AuthProvider";
corrected: import {AuthContext} from "./AuthProvider";