Fetch failed loading: GET [...] when adding trying to add a document to Firestore, Nuxt3

Question

I am trying to use the Firebase modular Web SKD to save a document to my firestore database:

 const app = initializeApp(
    {
      apiKey: process.env.FIREBASE_API_KEY,
      authDomain: process.env.FIREBASE_AUTH_DOMAIN,
      projectId: process.env.FIREBASE_PROJECT_ID,
      storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
      messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
      appId: process.env.FIREBASE_APP_ID,
    },
    "add-attraction"
  );

  const db = getFirestore(app);

    async function addAttraction() {
    console.log("Saving");

    const activity = {
       foo: bar,  
    };
    try {
      const docRef = await addDoc(collection(db, "activities"), activity);
      console.log("Document written with ID: ", docRef.id);
    } catch (error) {
      console.error("Error adding attraction:", error);
    }
  }

But I get weird errors in my browser console:

the mentioned line 210 is const docRef = await addDoc(collection(db, "activities"), activity);

Does anybody knows what causes the errors and what I am doing wrong? I already thought about some issues with permissions in my firestore, but I use the 'non-production' mode which in my understanding allows everybody to connect, right?

EDIT: Tipp for all other newbies: setLogLevel("debug") is key

Answer 1

First off, I am not really sure how you got those console logs. Have you tried enabling verbose logging for Firestore to get more information about the possible cause of the issue?

Here's what I did to initialize Firebase and use Firestore in my nuxt app using JS web modular API:

Created a file named useFirebaseClient.ts under composables directory to initialize Firebase and Firestore instance:

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

export const useFirebaseClient = () => {
    const firebaseConfig = {
        apiKey: "...",
        authDomain: "...",
        databaseURL: "...",
        projectId: "...",
        storageBucket: "...",
        messagingSenderId: "...",
        appId: "..."
    };

    const firebaseApp = initializeApp(firebaseConfig);
    const firestore = getFirestore(firebaseApp);

    return {
        firestore
    }
}

In a component or in app.vue file, use the following for writing data to Firestore:

<script setup>

  import { collection, addDoc } from "firebase/firestore";

  const writeData = async () => {
    const { firestore } = useFirebaseClient();
    const docRef = await addDoc(collection(firestore, "cities"), {
      name: "Tokyo",
      country: "Japan"
    });
    console.log("Document written with ID: ", docRef.id);
  }

</script>

<template>
  <div>
    <button @click="writeData">Write Data</button>  
  </div>
</template>

Note that useFirebaseClient() is the composable created to initialize Firebase and Firestore instance.