fix: add aliases to workaround vite issue

Author: posva

packages/nuxt/src/firebaseAliases.ts

@@ -0,0 +1,27 @@
+// handle aliases of firebase packages until https://github.com/vitejs/vite/issues/11114 is fixed
+
+import { resolvePath } from '@nuxt/kit'
+
+/**
+ * Adds an alias to the config.resolve.alias if it doesn't exist.
+ *
+ * @param aliases - config.resolve.alias
+ * @param libToCheck - the name of the library to check for e.g. 'firebase/firestore'
+ * @param filename - file after the `dist` folder e.g. 'index.mjs' -> 'firebase/firestore/dist/index.mjs'
+ */
+export async function addMissingAlias(
+  aliases: { [find: string]: string },
+  libToCheck: string,
+  filename: string
+) {
+  // skip adding it if the alias is already set in user config
+  if (!aliases[libToCheck]) {
+    // this gives an absolute path which is needed for the alias to work since the firebase package is not including the dist folder in exports
+    const resolvedLibFolder = await resolvePath(libToCheck)
+    const resolvedLibFile =
+      resolvedLibFolder.slice(0, resolvedLibFolder.lastIndexOf('dist')) +
+      'dist/' +
+      filename
+    aliases[libToCheck] = resolvedLibFile
+  }
+}

packages/nuxt/src/module.ts

@@ -19,6 +19,7 @@ import type {
 } from 'firebase-admin/app'
 import { markRaw } from 'vue'
 import type { NuxtVueFireAppCheckOptions } from './runtime/app-check'
+import { addMissingAlias } from './firebaseAliases'
 
 export interface VueFireNuxtModuleOptions {
   /**
@@ -206,38 +207,27 @@ const VueFire: NuxtModule<VueFireNuxtModuleOptions> =
     hooks: {
       // Resolve the correct firebase/firestore path on server only since vite is resolving the wrong one in dev
       'vite:extendConfig': async (config, { isServer }) => {
-        if (isServer) {
-          config.resolve ??= {}
-          config.resolve.alias ??= {}
-
-          // skip the whole thing if the alias is already set in user config
-          // @ts-ignore
-          if (!config.resolve.alias['firebase/firestore']) {
-            // this gives an absolute path which is needed for the alias to work since the firebase package is not including the dist folder in exports
-            const resolvedFirestore = await resolvePath('firebase/firestore')
-            const resolvedFirestoreMJS =
-              resolvedFirestore.slice(
-                0,
-                resolvedFirestore.lastIndexOf('dist')
-              ) + 'dist/index.mjs'
-            // @ts-ignore
-            config.resolve.alias['firebase/firestore'] = resolvedFirestoreMJS
-
-            const resolvedNamespacedFirestore = await resolvePath(
-              '@firebase/firestore'
-            )
-            const resolvedNamespacedFirestoreMJS =
-              resolvedNamespacedFirestore.slice(
-                0,
-                resolvedNamespacedFirestore.lastIndexOf('dist')
-              ) + 'dist/index.node.mjs'
-            // @ts-ignore
-            config.resolve.alias['@firebase/firestore'] =
-              resolvedNamespacedFirestoreMJS
-          }
+        config.resolve ??= {}
+        config.resolve.alias ??= {}
+        const aliases: Record<string, string> = config.resolve.alias as Record<
+          string,
+          string
+        >
 
-          // add any other firebase alias you need
+        const promises: Promise<void>[] = []
+
+        if (isServer) {
+          promises.push(
+            addMissingAlias(aliases, 'firebase/firestore', 'index.mjs')
+          )
+          promises.push(
+            addMissingAlias(aliases, '@firebase/firestore', 'index.node.mjs')
+          )
         }
+
+        promises.push(addMissingAlias(aliases, 'firebase/app', 'index.mjs'))
+
+        await Promise.all(promises)
       },
     },
   })