'Error with db persistence on Firestore [Vue3]

I've been trying to use enableIndexedDbPersistence to enable offline capabilities on my Vue3 website using the instructions in the docs here. Everything compiles just fine but the app keeps throwing a vague error in the browser's console log:

[2022-03-19T13:02:21.945Z]  @firebase/firestore: Firestore (9.6.4): INTERNAL UNHANDLED ERROR:  Error: Failed to execute 'put' on 'IDBObjectStore': #<Object> could not be cloned.
    at ti.put (webpack-internal:///./node_modules/@firebase/firestore/dist/index.esm2017.js:5969:24)
    at Proxy.ae (webpack-internal:///./node_modules/@firebase/firestore/dist/index.esm2017.js:7166:22)
    at Proxy.updateTargetData (webpack-internal:///./node_modules/@firebase/firestore/dist/index.esm2017.js:7133:21)
    at eval (webpack-internal:///./node_modules/@firebase/firestore/dist/index.esm2017.js:9146:30)
    at Map.forEach (<anonymous>)
    at eval (webpack-internal:///./node_modules/@firebase/firestore/dist/index.esm2017.js:9105:25)
    at eval (webpack-internal:///./node_modules/@firebase/firestore/dist/index.esm2017.js:8508:20)
    at eval (webpack-internal:///./node_modules/@firebase/firestore/dist/index.esm2017.js:5659:49)
    at zs.wrapUserFunction (webpack-internal:///./node_modules/@firebase/firestore/dist/index.esm2017.js:5652:23)
    at zs.wrapSuccess (webpack-internal:///./node_modules/@firebase/firestore/dist/index.esm2017.js:5659:25)

index.esm2017.js?0829:5883 Uncaught (in promise) DOMException: Failed to execute 'put' on 'IDBObjectStore': #<Object> could not be cloned.
    at ti.put (webpack-internal:///./node_modules/@firebase/firestore/dist/index.esm2017.js:5969:24)
    at Proxy.ae (webpack-internal:///./node_modules/@firebase/firestore/dist/index.esm2017.js:7166:22)
    at Proxy.updateTargetData (webpack-internal:///./node_modules/@firebase/firestore/dist/index.esm2017.js:7133:21)
    at eval (webpack-internal:///./node_modules/@firebase/firestore/dist/index.esm2017.js:9146:30)
    at Map.forEach (<anonymous>)
    at eval (webpack-internal:///./node_modules/@firebase/firestore/dist/index.esm2017.js:9105:25)
    at eval (webpack-internal:///./node_modules/@firebase/firestore/dist/index.esm2017.js:8508:20)
    at eval (webpack-internal:///./node_modules/@firebase/firestore/dist/index.esm2017.js:5659:49)
    at zs.wrapUserFunction (webpack-internal:///./node_modules/@firebase/firestore/dist/index.esm2017.js:5652:23)
    at zs.wrapSuccess (webpack-internal:///./node_modules/@firebase/firestore/dist/index.esm2017.js:5659:25)

This is the code in my Vue3 TypeScript app:

@MutationAction({ mutate: ["db"] })
  async initFirestore(): Promise<any> {
    if (!this.app) return null;
    let db = this.db;
    if (!db) {
      db = initializeFirestore(this.app, {
        cacheSizeBytes: CACHE_SIZE_UNLIMITED,
      });
      await enableIndexedDbPersistence(db);
    }
    return { db };
  }

From what I can tell, db persistence is in fact set, but the snapshots I'm listening to are throwing these errors and no longer load any data. I've tried with no luck:

updating firebase (cur. v9.6.4)
updating node (cur. v16.14.0)
clearing all application data and retrying

I'm sort of lost as to what could be causing this issue. Any help is appreciated.

Solution 1:^[1]

Might be related to the use db = this.db might be worth a try to

  async initFirestore(): Promise<any> {
    if (!this.app) return null;
    //let db = this.db;
    if (!this.db) {
      this.db = initializeFirestore(this.app, {
        cacheSizeBytes: CACHE_SIZE_UNLIMITED,
      });
      await enableIndexedDbPersistence(this.db);
    }
    return { this.db };
  }

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	SrGeneroso

'Error with db persistence on Firestore [Vue3]

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]