[vite dev] Error loading external error with firebase

Discussed in https://github.com/nuxt/framework/discussions/3525

<div type='discussions-op-text'>

^{Originally posted by akhilnarayanan1 March 6, 2022}

Environment

• Operating System: Windows_NT
• Node Version: v16.13.1
• Nuxt Version: 3.0.0-27451165.114cbe3
• Package Manager: npm@7.21.1
• Bundler: Vite
• User Config: -
• Runtime Modules: -
• Build Modules: -
• Firebase: 9.6.8

Reproduction

1. npx nuxi init nuxt3-app cd nuxt3-app npm install npm install firebase

2. Create plugins/firebase.client.ts (replace firebaseConfig parameters)

import { defineNuxtPlugin } from "#app";

import { FirebaseApp, initializeApp } from "firebase/app";
import { Firestore, getFirestore } from "firebase/firestore";
import { initializeAuth, browserLocalPersistence, browserSessionPersistence, 
  indexedDBLocalPersistence, Auth} from "firebase/auth";

declare module "#app" {
  interface NuxtApp {
    $firebaseApp: FirebaseApp;
    $firebaseAuth: Auth;
    $firebaseDB: Firestore;
  }
};

export default defineNuxtPlugin((nuxtApp) => {
 
  const firebaseConfig = {
    apiKey: "XXXX",
    authDomain: "XXX",
    projectId: "XXX",
    storageBucket: "XXX",
    messagingSenderId: "XXX",
    appId: "XXX",
    measurementId: "XXX",
  }; // 🔁 change this

  const app = initializeApp(firebaseConfig);
  const auth = initializeAuth(app, {
    persistence: [indexedDBLocalPersistence, browserSessionPersistence, browserLocalPersistence],
  });
  const db = getFirestore(app);

  nuxtApp.provide("firebaseApp", app);
  nuxtApp.provide("firebaseAuth", auth);
  nuxtApp.provide("firebaseDB", db);
});

1. Edit app.vue

<template>
  <div>
    <NuxtWelcome />
  </div>
</template>

<script setup lang="ts">
  import { doc } from "firebase/firestore";

  const { $firebaseDB } = useNuxtApp();

  onMounted(()=>{
    const docRef = doc($firebaseDB, "users", 'something'); // 🔥 ERROR with this line 
  })

</script>

Describe the bug

When I add const docRef = doc($firebaseDB, "users", 'something'); , I get an error -> [vite dev] Error loading external in browser when using firebase firestore and below error in VSCode terminal

ReferenceError: IDBIndex is not defined
    at file:///C:/project/personal/work/nuxt-issue/nuxt3-app/node_modules/idb/lib/idb.mjs:87:38
    at ModuleJob.run (node:internal/modules/esm/module_job:185:25)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:281:24)
    at async __instantiateModule__ (file:///C:/project/personal/work/nuxt-issue/nuxt3-app/.nuxt/dist/server/server.mjs:25837:3)

Additional context

There is no such issue when I try to add ssr: false in nuxt.config.ts

[akhilnarayanan1]

Looks like this issue was from firebase, when I upgraded v9.6.8 to v9.6.9, everything is working again

[hecateball]

I got the same error.

It seems to be the problem that nuxt dev uses firebase/firestore/dist/index.esm.js (which is declared as exports.default in firebase package.json ) even for server assets.

Workaround: set alias for firebase/app and firebase/firestore in nuxt.config.js to explicitly use .mjs build.

export default defineNuxtConfig({
  alias: {
    'firebase/app': 'firebase/app/dist/index.mjs',
    'firebase/firestore': 'firebase/firestore/dist/index.mjs',
  },
})