typescript - Impossible d'accéder à la variable avant son initialisation dans getServerSideProps NextJS

Je travaille avec Firebase et j'initialise les API et fonctions pour récupérer les données dont j'ai besoin dans firebase.tsx, puis je les importe dans mon fichier pages/index.tsx mais je ne peux pas accéder aux exports après l'initialisation de l'application Firebase

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

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 }) => {
...
}

Lorsque je déplace export const yo='yo' après la ligne 15, j'obtiens une erreur « impossible d'accéder à 'yo' avant l'initialisation », mais avec sa position actuelle, je ne l'obtiens pas.

Il semble que l'initialisation de Firebase retarde l'initialisation des exports pour qu'elle vienne après, mais j'ai vu d'autres personnes suivre ce même schéma ?

Qu'est-ce que je manque ?

Message d'erreur

Réponse n°1

Le SDK JavaScript de Firebase (>= v 9.0) introduit la nouvelle API modulaire et inclut des changements majeurs. Si vous utilisez la version 8, vous devez mettre à jour votre code afin qu'il fonctionne toujours avec la version 9.0.0 et les suivantes. Bien que la majorité du SDK de la version 9 suive les mêmes schémas que la version 8, l'organisation du code est différente. Il ne s'agit donc pas d'un problème avec les imports de la version 9, mais plutôt d'une nouvelle façon de gérer les imports.

Par exemple, le chaînage par points de la version 8, comme firebaseApp.auth(), est remplacé dans la version 9 par une seule fonction getAuth() qui prend firebaseApp et retourne une instance d'Authentication. Cela signifie que les applications Web créées avec la version 8 ou antérieure nécessitent une refactorisation afin de profiter de l'approche modulaire de la version 9. Firebase fournit des bibliothèques de compatibilité pour faciliter cette transition dans la v9. Comme vous l'avez dit, vous devez mettre à jour vos imports.

Avant : version 8

import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';

Après : compatibilité version 9

// v9 compat packages are API compatible with v8 code
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

Vous pouvez également refactoriser votre code selon un style modulaire qui est encore un peu différent de la version compat. Tout cela est documenté ici. Parcourez-le pour avoir une compréhension claire des différences.

Réponse n°2

Veuillez également prendre note de ce qui suit comme mentionné ici.

Gardez à l'esprit : les bibliothèques de compatibilité sont une solution temporaire qui sera complètement supprimée dans une future version majeure du SDK (comme la version 10 ou la version 11). Votre objectif final est de supprimer le code de compatibilité et de ne conserver que le code de style modulaire de la version 9 dans votre application.

Donc, « compat » est juste une solution temporaire pour faire fonctionner votre code v8 avec v9 sans trop de retravail. Finalement, vous devez refactoriser le code en style modulaire.