Firebase Firestore Bundle problem: db.loadBundle is not a function-CodePudding

Trying to configure bundles as per Google's docs. Specific error is:

TypeError: firebase_config__WEBPACK_IMPORTED_MODULE_2_.db.loadBundle is not a function

Here's my firebase.config.js:

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
var firebaseConfig = {...};
const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);

And my app.js:

import React, { useState, useEffect } from 'react';
import { query, orderBy, limit, collection, getDocs, loadBundle } from "firebase/firestore";

import { db } from './firebase.config.js';
    
import './App.css';

function App() {

...

  const fetchReadings = async () => {

    const readingsArray = [];
    const dailyAveragesArray = [];

    const resp = await fetch('/createBundle');
    console.log("resp: ",resp);
    await db.loadBundle(resp.body);
    const query = await db.namedQuery('all-readings-query');
    const readingSnapshot = await query.get({ source: 'cache' });

    ...

Please note that my old fetchReadings worked, which had this instead:

const readingQuery = query(collection(db, "readings"));
const readingSnapshot = await getDocs(readingQuery);

What have I missed here? TIA.

CodePudding user response：

The loadBundle() is a top level function in the new Modular SDK.

import { loadBundle } from "firebase/firestore"

await loadBundle(db, resp.body)

The same goes for namedQuery. Checkout the linked documentation for reference.