Cannot read property 'arrayUnion' of undefined
I am trying to add an element to an existing array in Firebase. I am using react. I have looked at other mentions of this issue on here and the solution is always exactly what I am already doing so help would be much appreciated. This only needs to update if the user selects a team to join and I've checked that teams is truthy
My firebase setup:
import firebase from 'firebase/app'
import 'firebase/functions'
import 'firebase/firestore'
import 'firebase/auth'
import 'firebase/storage'
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: process.env.REACT_APP_API_KEY,
authDomain: process.env.REACT_APP_AUTH_DOMAIN,
databaseURL: process.env.REACT_APP_DATABASE_URL,
projectId: process.env.REACT_APP_PROJECT_ID,
storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
messagingSenderId: process.env.REACT_APP_MESSAGE_SENDER_ID,
appId: process.env.REACT_APP_ID,
measurementId: process.env.REACT_APP_MEASUREMENT_ID
};
const firebaseApp = firebase.initializeApp(firebaseConfig)
const db = firebaseApp.firestore()
const auth = firebaseApp.auth()
const storage = firebaseApp.storage()
// const provider = new firebase.auth.GoogleAuthProvider()
export { db, storage, auth }
my function:
import { db, storage } from '../../firebase'
...
...
...
if(teams) {
db.collection('teams').doc(team.id).update({
teamMembers: db.FieldValue.arrayUnion(currentUser.id)
})
}
The Error:
Uncaught (in promise) TypeError: Cannot read property 'arrayUnion' of undefined
at userInfoFirebase (SecondStep.js:179)
at submitFinalData (SecondStep.js:200)
at handleSubmit (SecondStep.js:281)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
at invokeGuardedCallback (react-dom.development.js:4056)
at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4070)
at executeDispatch (react-dom.development.js:8243)
at processDispatchQueueItemsInOrder (react-dom.development.js:8275)
at processDispatchQueue (react-dom.development.js:8288)
at dispatchEventsForPlugins (react-dom.development.js:8299)
at react-dom.development.js:8508
at batchedEventUpdates$1 (react-dom.development.js:22396)
at batchedEventUpdates (react-dom.development.js:3745)
at dispatchEventForPluginEventSystem (react-dom.development.js:8507)
at attemptToDispatchEvent (react-dom.development.js:6005)
at dispatchEvent (react-dom.development.js:5924)
at unstable_runWithPriority (scheduler.development.js:646)
at runWithPriority$1 (react-dom.development.js:11276)
at discreteUpdates$1 (react-dom.development.js:22413)
at discreteUpdates (react-dom.development.js:3756)
at dispatchDiscreteEvent (react-dom.development.js:5889)
Your db = firebase.firestore()
, but FieldValue
is defined on firebase.firestore
(without ()
).
You'll also need to export the firebase
namespace with:
export { firebase, db, storage, auth }
Import it with:
import { firebase, db, storage } from '../../firebase'
And then use it with:
teamMembers: firebase.firestore.FieldValue.arrayUnion(currentUser.id)
Alternatively, you can export arrayUnion
or FieldValue
itself, and use those.