Javascript – firebase.firestore.FieldValue.serverTimestamp() no longer working

I haven’t worked on my project in a while, so after updating firestore to the latest version I’m running into an issue with the server time stamps I had been using.

import { AngularFirestore } from '@angular/fire/compat/firestore';
import firebase from 'firebase/compat/app';
import 'firebase/firestore'

const timestamp = { timestamp: firebase.firestore.FieldValue.serverTimestamp() }

This has worked for a while, and would save a field in firestore as a timestamp type (see screenshot below)

When I try to run this after updating, I get the following console error:

ERROR TypeError: Cannot read properties of undefined (reading ‘FieldValue’)

I tried to update the imports to

import { serverTimestamp } from 'firebase/firestore';

and then use something like this to try setting the timestamp field

const timestampA = {timestamp: serverTimestamp()}

I’m getting errors trying to actually save it:

ERROR FirebaseError: Function addDoc() called with invalid data. Unsupported field value: a custom aj object (found in field timestamp in document Party-Management/8UcAzhIEPAwFqUTkwr71/Party-Inventory/uthoJHWfozdjZ5OyluBW)

Am I missing something here on how to get serverTimestamps to work in newer firebase versions?

Here is the the whole function that worked in prior versions:

  addInventory(inventoryAdd: any, pid: string, sid?: string, eid?: any) {
const inventoryCollectionRef = this.afs.collection(this.partyCollectionPath + pid + this.partyInventoryPath);
const timestamp = { timestamp: firebase.firestore.FieldValue.serverTimestamp() }
const sessionId = sid ? { sessionId: sid} : null;
const eventId = eid ? { eventId: eid } : null;
return inventoryCollectionRef.add({ ...inventoryAdd, ...timestamp, ...sessionId, ...eventId }).then(docRef => {
  return docRef.id
}).catch(error => console.error("Error adding document: ", error))

}

So, I’m getting a little bit more information on how this is behaving.

If I try to use this code to create my timestamp type object,
const timestamp = { timestamp: serverTimestamp() }
This code blows up:

inventoryCollectionRef.add({ ...inventoryAdd, ...timestamp, ...sessionId, ...eventId })

With this error message:

ERROR FirebaseError: Function addDoc() called with invalid data. Unsupported field value: a custom aj object (found in field timestamp in document Party-Management/8UcAzhIEPAwFqUTkwr71/Party-Inventory/NCi4Ad4a2jc8RjdKQdNm)

Which means that whatever is now in serverTimestamp() isn’t playing nicely with the ‘timestamp’ type i had used in the past.

If I change just the constant to this:

const timestamp = serverTimestamp()

The call actually goes through and saves a record to firestore, but when I actually look at the data in firestore it’s saving a string type with a field name of ‘_methodname’, and a value of ‘serverTimestamp’ which is obviously not what I want.

I found some documentation on the Timestamp class in Firebase, so I’ll try looking at that too. (https://firebase.google.com/docs/reference/js/firestore_.timestamp)

In the end, I want to be able to specifically save the ‘timestamp’ type, and I’m sure there is a way to do it!

**Update: ** Ugh, I’m going to guess this has to do with my old implementation of angularFirestore and firebase, and probably some ‘hacky’ upgrades where I didn’t really understand what I was doing. I found current documentation that insinuates this is the correct way to do it still (https://firebase.google.com/docs/firestore/manage-data/add-data#server_timestamp), so I’m guessing I have some fun mismatches somewhere.

Unless someone has a ‘magic bullet’ fix, my next two steps are to try to figure out how to totally rip out the current version of angulare/firestore and firebase through ng and npm and try to install them fresh, potentially with some of the new implementations I’ve seen.

If that doesn’t work, I think it might be time for a full refactor and build up from scratch again.