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

Viewed 7697

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:

screenshot of the error

1 Answers

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";
Related