title: onSnapshot() in firebase giving error: undefined is not a function?
body: <p>I am getting this error when the realtime listener is enabled using <code>onSnapshot()</code>:
  <a href="https://i.stack.imgur.com/XnthE.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XnthE.jpg" alt="enter image description here"></a>
  <strong>EDIT</strong>
  <strong>Error:</strong>  WARN  Possible Unhandled Promise Rejection (id: 5):
  TypeError: undefined is not a function (near '...}).catch(function (err) {...')
  fetchFriends$@<a href="http://localhost:8081/screens/AllFriends.bundle?platform=ios&amp;dev=true&amp;minify=false&amp;modulesOnly=true&amp;runModule=false&amp;shallow=true:92:25" rel="nofollow noreferrer">http://localhost:8081/screens/AllFriends.bundle?platform=ios&amp;dev=true&amp;minify=false&amp;modulesOnly=true&amp;runModule=false&amp;shallow=true:92:25</a>
  tryCatch@<a href="http://localhost:8081/index.bundle?platform=ios&amp;dev=true&amp;minify=false:29289:23" rel="nofollow noreferrer">http://localhost:8081/index.bundle?platform=ios&amp;dev=true&amp;minify=false:29289:23</a></p>
  
  <p>This is code the producing the error:</p>
  
  <pre class="lang-js prettyprint-override"><code>componentDidMount() {
      this.fetchFriends()
        .then(() =&gt;
          this.setState({
            friends: this.tempFriends,
          }),
        )
        .then(() =&gt; this.fetchEachFriend());
    }
  
    async fetchFriends() {
      const uid = auth().currentUser.uid;
      await firestore()
        .collection('Friendships')
        .where('uid1', '==', `${uid}`)
        .onSnapshot(doc =&gt; {                      //Realtime listener
          if (doc.empty) {
            null;
            console.log('DOC: ', doc.empty);
          } else {
            doc.forEach(snap =&gt; {
              console.log(snap.data().uid2);
              this.tempFriends.push(snap.data().uid2);
              console.log(this.tempFriends);
            });
          }
        })
        .catch(err =&gt; console.log('Error DOC1 ', err));
      await firestore()
        .collection('Friendships')
        .where('uid2', '==', `${uid}`)
        .onSnapshot(doc =&gt; {                             //realtime listener
          if (doc.empty) {
            null;
            console.log('DOC2: ', doc.empty);
          } else {
            doc.forEach(snap =&gt; {
              console.log(snap.data().uid1);
              this.tempFriends.push(snap.data().uid1);
              console.log(this.tempFriends);
            });
          }
        })
        .catch(err =&gt; console.log('Error DOC2 ', err));
    }
  
    fetchEachFriend() {
      this.state.friends.forEach(uid =&gt; {
        console.log('UID: ', uid);
        firestore()
          .collection('Users')
          .doc(`${uid}`)
          .onSnapshot(doc =&gt; {                                  //realtime listener
            console.log('Friend Data ', doc.data());
            this.tempFriendsData.push({
              uid: doc.id,
              data: doc.data(),
            });
          })
          .then(() =&gt; this.setState({friendsData: this.tempFriendsData}))
          .catch(err =&gt; {
            console.log('Error fetchEachFriend(): ', err);
          });
      });
    }
  </code></pre>
  
  <p>Below is the code that is not producing any errors, when realtime listener is disable and I am using get() and then() to retrive the data from the db.</p>
  
  <pre class="lang-js prettyprint-override"><code>componentDidMount() {
      this.fetchFriends()
        .then(() =&gt;
          this.setState({
            friends: this.tempFriends,
          }),
        )
        .then(() =&gt; this.fetchEachFriend());
    }
  
    async fetchFriends() {
      const uid = auth().currentUser.uid;
      await firestore()
        .collection('Friendships')
        .where('uid1', '==', `${uid}`)
        .get()
        .then(doc =&gt; {
          //Realtime listener
          if (doc.empty) {
            null;
            console.log('DOC: ', doc.empty);
          } else {
            doc.forEach(snap =&gt; {
              console.log(snap.data().uid2);
              this.tempFriends.push(snap.data().uid2);
              console.log(this.tempFriends);
            });
          }
        })
        .catch(err =&gt; console.log('Error DOC1 ', err));
      await firestore()
        .collection('Friendships')
        .where('uid2', '==', `${uid}`)
        .get()
        .then(doc =&gt; {
          //realtime listener
          if (doc.empty) {
            null;
            console.log('DOC2: ', doc.empty);
          } else {
            doc.forEach(snap =&gt; {
              console.log(snap.data().uid1);
              this.tempFriends.push(snap.data().uid1);
              console.log(this.tempFriends);
            });
          }
        })
        .catch(err =&gt; console.log('Error DOC2 ', err));
    }
  
    fetchEachFriend() {
      this.state.friends.forEach(uid =&gt; {
        console.log('UID: ', uid);
        firestore()
          .collection('Users')
          .doc(`${uid}`)
          //realtime listener
          .get()
          .then(doc =&gt; {
            console.log('Friend Data ', doc.data());
            this.tempFriendsData.push({
              uid: doc.id,
              data: doc.data(),
            });
          })
          .then(() =&gt; this.setState({friendsData: this.tempFriendsData}))
          .catch(err =&gt; {
            console.log('Error fetchEachFriend(): ', err);
          });
      });
  </code></pre>
  
  <p>I wish to enable realtime listeners. Please help me. Thank you.</p>
  
  <p><strong>EDIT</strong>: Removed 'await', but still getting the same error. Code after removing 'await': </p>
  
  <pre class="lang-js prettyprint-override"><code>componentDidMount() {
      this.fetchFriends()
        .then(() =&gt;
          this.setState({
            friends: this.tempFriends,
          }),
        )
        .then(() =&gt; this.fetchEachFriend());
    }
  
    fetchFriends() { //Error appearing here
      const uid = auth().currentUser.uid;
      firestore()
        .collection('Friendships')
        .where('uid1', '==', `${uid}`)
        .onSnapshot(doc =&gt; { //More precisely error is here
          if (doc.empty) {
            null;
            console.log('DOC: ', doc.empty);
          } else {
            doc.forEach(snap =&gt; {
              console.log(snap.data().uid2);
              this.tempFriends.push(snap.data().uid2);
              console.log(this.tempFriends);
            });
          }
        })
        .catch(err =&gt; console.log('Error DOC1 ', err));
      firestore()
        .collection('Friendships')
        .where('uid2', '==', `${uid}`)
        .onSnapshot(doc =&gt; {
          if (doc.empty) {
            null;
            console.log('DOC2: ', doc.empty);
          } else {
            doc.forEach(snap =&gt; {
              console.log(snap.data().uid1);
              this.tempFriends.push(snap.data().uid1);
              console.log(this.tempFriends);
            });
          }
        })
        .catch(err =&gt; console.log('Error DOC2 ', err));
    }
  
    fetchEachFriend() {
      this.state.friends.forEach(uid =&gt; {
        console.log('UID: ', uid);
        firestore()
          .collection('Users')
          .doc(`${uid}`)
          .onSnapshot(doc =&gt; {
            console.log('Friend Data ', doc.data());
            this.tempFriendsData.push({
              uid: doc.id,
              data: doc.data(),
            });
          })
          .then(() =&gt; this.setState({friendsData: this.tempFriendsData}))
          .catch(err =&gt; {
            console.log('Error fetchEachFriend(): ', err);
          });
      });
    }
  </code></pre>
  
  <p>EDIT: Debugger is pointing to the first line of the file, I'm totally consfused now:</p>
  
  <pre><code>import React, {Component} from 'react';
         ^^^^^
  
  SyntaxError: Unexpected identifier
      at Module._compile (internal/modules/cjs/loader.js:723:23)
      at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
      at Module.load (internal/modules/cjs/loader.js:653:32)
      at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
      at Function.Module._load (internal/modules/cjs/loader.js:585:3)
      at Function.Module.runMain (internal/modules/cjs/loader.js:831:12)
      at startup (internal/bootstrap/node.js:283:19)
      at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)
  </code></pre>