Paste code

import { useEffect, useState } from "react";
import "./App.css";
import { initializeApp } from "firebase/app";
import {
  getFirestore,
  connectFirestoreEmulator,
} from "firebase/firestore/lite";
import {
  getDocs,
  collection,
  query,
  orderBy,
  limit,
} from "firebase/firestore/lite";

const connectEmulators = true;

const firebaseConfig = {
  projectId: "dummy-project-id",
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const firestore = getFirestore(app);
// this.analytics = getAnalytics(this.app);
if (connectEmulators) {
  // connectAuthEmulator(this.auth, "http://localhost:9099");
  connectFirestoreEmulator(firestore, "localhost", 8080);
}

async function getPerfumes() {
  const perfumeRecipesCollection = collection(firestore, "perfume-recipes");

  const perfumes = await getDocs(
    query(perfumeRecipesCollection, orderBy("created", "desc"), limit(100))
  );
  return perfumes.docs.map((doc) => doc.data());
}

function App() {
  const [perfumes, setPerfumes] = useState<Array<unknown> | null>(null);
  const [fetchError, setFetchError] = useState<Error | null>();

  useEffect(() => {
    const fetchPerfumes = async () => {
      try {
        setPerfumes(await getPerfumes());
      } catch (e) {
        if (e instanceof Error) {
          setFetchError(e);
        }
        throw e;
      }
    };
    fetchPerfumes();
  }, [setPerfumes]);

  return (
    <>
      <h1>
        Test playground for issue
        <a href="https://github.com/firebase/firebase-tools/issues/6853">
          #6853
        </a>
      </h1>
      <div className="card errorAlert">
        {fetchError && <pre>{`${fetchError}`}</pre>}
      </div>

      <div className="card successAlert">
        {perfumes !== null && (
          <>{perfumes.length} perfumes successfully Fetched.</>
        )}
      </div>
    </>
  );
}

export default App;