Currently, I am working on setting up Firebase and configuring the APIs and functions to retrieve necessary data in my firebase.tsx file. Afterwards, I import them into my pages/index.tsx file but I am encountering an issue where I cannot access exports after initializing the Firebase app
Here is a snippet from services/firebase.tsx:
import firebase, { FirebaseOptions } from 'firebase/app'
import { getAuth } from 'firebase/auth';
import { collection, doc, setDoc, getFirestore, query, where, getDocs, orderBy } from "firebase/firestore";
import { getStorage } from 'firebase/storage';
import { getAnalytics } from "firebase/analytics";
import config from '../config';
import Blog, { blogConverter } from "../models/Blog";
export const yo = 'yo'
if (!firebase.getApps().length) {
firebase.initializeApp(config.firebaseConfig as FirebaseOptions);
}
export const auth = getAuth();
export const firestore = getFirestore();
export const storage = getStorage();
export const analytics = getAnalytics();
/**
* Get all blogs from firebase
* @returns {Promise<Blog[]>} A promise that resolves to an array of Blog objects
*/
export const getBlogs = async (): Promise<Blog[]> => {
const q = query(
collection(firestore, "blogs"),
where("status", "==", "published"),
where("publish_date", "<", new Date().toUTCString()),
orderBy("publish_date", "desc")
).withConverter(blogConverter);
const querySnapshot = await getDocs(q);
if (querySnapshot.empty) return [];
const allBlogs: Blog[] = querySnapshot.docs.map(doc => doc.data());
return allBlogs;
}
This is how it's being used in pages/index.tsx:
import type { NextPage } from 'next'
import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
import { GetServerSideProps } from 'next'
import { getBlogs, yo } from '../services/firebase'
import Link from 'next/link'
import Blog from '../models/Blog'
export const getServerSideProps: GetServerSideProps = async (context) => {
console.log(yo)
const blogs = await getBlogs()
return {
props: {
blogs
}
}
}
interface Props {
blogs: Blog[]
}
const Home: NextPage<Props> = ({ blogs }) => {
...
}
By moving export const yo = 'yo' after line 15, the error "cannot access 'yo' before initialization" occurs, but placing it where it currently is does not trigger any errors.
It appears that the initialization of Firebase is affecting the sequence of exports, although I've seen others use a similar approach without issues. What could I be overlooking?
Error Message https://i.sstatic.net/WsmSS.png