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>
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>