How can I fix getting the error window is not defined

user_16771597 0
Viewed 135

How can I fix getting the error window is not defined when using firebase in my sveltekit project I cant put it on mount because of other reasons and am trying to get around it? any ideas or is there a way for me to put the initialization in on mount and still send the data outside of mount

 <script>
      // Import the functions you need from the SDKs you need
      import { initializeApp } from "firebase/app";
      import { getAnalytics } from "firebase/analytics";
      import { getFirestore } from "firebase/firestore";
      import { onMount } from 'svelte';
      import { collection, addDoc } from "firebase/firestore"; 
      // TODO: Add SDKs for Firebase products that you want to use
      // https://firebase.google.com/docs/web/setup#available-libraries
      
      // Your web app's Firebase configuration
      // For Firebase JS SDK v7.20.0 and later, measurementId is optional
      let song = 'song';
        
      const firebaseConfig = {
     
      };
    
      const app = initializeApp(firebaseConfig);
      const analytics = getAnalytics(app);
      const db = getFirestore(app);
      async function sendSong(){
      try {
        const docRef = await addDoc(collection(db, "songs"), {
          title: {song},
          atist: "test"
        });
        console.log("Document written with ID: ", docRef.id);
      } catch (e) {
        console.error("Error adding document: ", e);
      }
      }
      </script>
      <input bind:value={song}>
   
      
      <style>
      </style>
sveltekit google-cloud-firestore svelte firebase javascript
1 Answers

This ended up working for me

<script>
      // Import the functions you need from the SDKs you need
      import { initializeApp } from "firebase/app";
      import { getAnalytics } from "firebase/analytics";
      import { getFirestore } from "firebase/firestore";
      import { onMount } from 'svelte';
      import { collection, addDoc } from "firebase/firestore"; 
      import { Notyf } from 'notyf';
        import 'notyf/notyf.min.css'; // for React, Vue and Svelte
      // TODO: Add SDKs for Firebase products that you want to use
      // https://firebase.google.com/docs/web/setup#available-libraries
      
      // Your web app's Firebase configuration
      // For Firebase JS SDK v7.20.0 and later, measurementId is optional
      let song ;
      let artist ;
      let db;
      onMount(() => {
      const firebaseConfig = {
        //redacted
      };
    
      const app = initializeApp(firebaseConfig);
      const analytics = getAnalytics(app);
      db = getFirestore(app);
    
    
    
    });
    
    async function sendSong(){
      try {
        const docRef = await addDoc(collection(db, "songs"), {
          song: {song},
          atist: {artist}
        });
        console.log("Document written with ID: ", docRef.id);
      } catch (e) {
        console.error("Error adding document: ", e);
      }
      }
      </script>
    <div class="main">
      <h1 class="text-primary">Submit a song</h1>
      <input class="margin" placeholder="song" bind:value={song}>
      <input class="margin" placeholder="artist" bind:value={artist}>
      <button on:click={sendSong} id="send-button" type="submit" class="margin sub button primary is-full-width "
                >Submit Form</button>
        </div>  
      <style>
        .margin{
          margin-top: .5em;
        }
        .main{
          margin: 4em;
        }
      </style>
user_167715970
Related