Issue with Firebase on expo project

Question

Whenever I click the submit button on my code to upload data to my firebase database, I get this error :

ERROR [2024-01-21T03:39:39.733Z] @firebase/firestore: Firestore (10.7.2): INTERNAL UNHANDLED ERROR: TypeError: Cannot read property 'includes' of undefined

i have tried uninstalling the node modules and specifically firebase but nothing is working. I tried making a new firebase account and it still doesn't work. I cannot figure it out.

import { StyleSheet, Text, View, TextInput, Button } from 'react-native';
import { getAuth } from 'firebase/auth';
import { getFirestore, doc, setDoc } from 'firebase/firestore';
import app from '../config/FirebaseConfig'; // Adjust this path as necessary

const DataInput = () => {
  const [monthOrderTotal, setMonthOrderTotal] = useState('');
  const [monthDollarAmount, setMonthDollarAmount] = useState('');

  const firestore = getFirestore(app);
  const auth = getAuth();

  const handleSave = async () => {
    const user = auth.currentUser;
    if (user) {
      try {
        const userData = {
          monthOrderTotal,
          monthDollarAmount
        };
        // Merge the new data into the existing document or create a new document if it doesn't exist
        await setDoc(doc(firestore, 'users', user.uid), userData, { merge: true });
        console.log('Data saved successfully');
      } catch (error) {
        console.error('Error saving data: ', error);
      }
    } else {
      console.error('No user logged in');
    }
  };

  return (
    <View style={styles.container}>
      <Text>Data Input Screen</Text>
      <TextInput
        style={styles.input}
        placeholder="Month Order Total"
        value={monthOrderTotal}
        onChangeText={setMonthOrderTotal}
        keyboardType="numeric"
      />
      <TextInput
        style={styles.input}
        placeholder="Month Dollar Amount"
        value={monthDollarAmount}
        onChangeText={setMonthDollarAmount}
        keyboardType="numeric"
      />
      <Button title="Save" onPress={handleSave} />
    </View>
  );
};

export default DataInput;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  input: {
    height: 40,
    margin: 12,
    borderWidth: 1,
    padding: 10,
    width: '80%'
  }
});

Answer 1

It's an issue with Firestore 10.7.2 Just downgrade to version 10.7.1 and it should work fine. Check this issue on GitHub

Answer 2

It's a known issue with the latest release, it now has been resolved and the fix will come in the next release. One way to fix it is to rollback to a previous version i.e. 10.7.1 or if the isssue persists like mine you can just add this line of code:

window.navigator.userAgent = "ReactNative";

I pasted mine inside the App.js file before any firebase related import.

Edited to add credits: https://github.com/firebase/firebase-js-sdk/issues/7962#issuecomment-1902290249