如何解决 Firebase 9 + Nuxt 3 中的“Component auth has not been registered yet”错误

Question

我正在一家在线商店工作，并尝试通过 Firebase 实施 Google OAuth。我已经成功集成了存储和 Firestore 等 Firebase 服务，但是当我尝试将 Firebase Auth 添加到我的 Nuxt 3 应用程序时遇到错误。具体来说，我收到“组件身份验证尚未注册”错误

[nitro] [dev] [unhandledRejection] Error: Component auth has not been registered yet                     06:35:21
    at Provider.initialize (/Users/swanandkadam/Desktop/Work/underground/@firebase/component:233:19)
    at initializeAuth (file:///Users/swanandkadam/Desktop/Work/underground/node_modules/@firebase/auth/dist/node-esm/totp-abcc15a3.js:2947:27)
    at Module.getAuth (file:///Users/swanandkadam/Desktop/Work/underground/node_modules/@firebase/auth/dist/node-esm/totp-abcc15a3.js:6575:18)
    at setup (/Users/swanandkadam/Desktop/Work/underground/pages/Login.vue:25:33)
    at _sfc_main.setup (/Users/swanandkadam/Desktop/Work/underground/pages/Login.vue:52:23)
    at callWithErrorHandling (/Users/swanandkadam/Desktop/Work/underground/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:171:22)
    at setupStatefulComponent (/Users/swanandkadam/Desktop/Work/underground/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7194:29)
    at setupComponent (/Users/swanandkadam/Desktop/Work/underground/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7149:11)
    at renderComponentVNode (/Users/swanandkadam/Desktop/Work/underground/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:628:17)
    at renderVNode (/Users/swanandkadam/Desktop/Work/underground/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:755:22)

我尝试删除 node_modules 文件夹 package-lock.json，然后使用 npm install 重新安装，正如我在 Github 上看到的那样可以解决问题。但是，这对我不起作用。

为了进一步调查，我创建了一个新的 Nuxt 3 应用程序，专门用于测试 Firebase Auth。然而，我仍然遇到同样的错误，即使我没有编写任何其他代码或安装除 Firebase 之外的任何其他包。

我的堆栈：

Nuxt 3 火力地堡 9

Package.json 文件

{
  "name": "nuxt-app",
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "@types/node": "^18",
    "nuxt": "^3.4.2"
  },
  "dependencies": {
    "firebase": "^9.12.0"
  }
}

firebase.js 文件

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  //... ( hidden for security purposes )

};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
// Initialize Firebase Authentication and get a reference to the service
const auth = getAuth(app);
export default auth;

非常感谢任何帮助。

预期结果：在我的在线商店中成功实施适用于 Google OAuth 的 Firebase Auth。

实际结果：在我的主项目和专为测试 Firebase Auth 创建的新项目中尝试将 Firebase Auth 添加到我的 Nuxt 3 应用程序时遇到“Component auth has not been registered yet”错误。