Merge pull request #2368 from gdg-x/firebase

Work around firebase/init.js to load config synchronous

Author: abraham

index.html

@@ -87,8 +87,18 @@
 
       // prettier-ignore
       {{ webVitalsPolyfill | safe }}
+
+      // Capture the config object from /__/firebase/init.js for src/firebase.ts
+      window.firebase = {
+        initializeApp: (config) => {
+          window.firebaseConfig = config;
+          // Delete fake Firebase global
+          delete window.firebase;
+        },
+      };
     </script>
 
+    <script src="/__/firebase/init.js"></script>
     <script src="./src/hoverboard-app.ts" type="module"></script>
     <script src="./src/components/app-install.ts" type="module"></script>
     <script src="./src/service-worker-registration.ts" type="module"></script>

src/firebase.ts

@@ -1,10 +1,31 @@
 import { getAnalytics } from 'firebase/analytics';
-import { initializeApp } from 'firebase/app';
+import { FirebaseOptions, initializeApp } from 'firebase/app';
 import { enableMultiTabIndexedDbPersistence, getFirestore } from 'firebase/firestore';
 import { getPerformance, initializePerformance } from 'firebase/performance';
 
-const response = await fetch('/__/firebase/init.json');
-export const firebaseApp = initializeApp(await response.json());
+/**
+ * Load Firebase config in index.html with /__/firebase/init.js. It stubs out
+ * window.firebase.initializeApp to grab the config and saves it on the window
+ * for use here. This is a workaround for the fact that the Firebase SDK v9 is
+ * modular and doesn't support init.js and top-level await is not well supported
+ * so loading from init.json caused issues with Safari, Jest, Vite, etc.
+ *
+ * https://github.com/gdg-x/hoverboard/pull/2368
+ */
+
+declare global {
+  interface Window {
+    firebaseConfig?: FirebaseOptions;
+  }
+}
+
+const firebaseConfig = window.firebaseConfig;
+
+if (!firebaseConfig) {
+  throw new Error('window.firebaseConfig is not defined');
+}
+
+export const firebaseApp = initializeApp(firebaseConfig);
 export const db = getFirestore(firebaseApp);
 export const performance = getPerformance(firebaseApp);
 export const analytics = getAnalytics(firebaseApp);