错误：组件身份验证尚未注册 - React、NextJs、Firebase 身份验证

Question

这个著名问题再次出现。

我使用

docker compose

来运行我的应用程序。这是日志：

 | Error: Component auth has not been registered yet
 |     at a.initialize (/app/.next/server/chunks/777.js:3638:2077)
 |     at rS (/app/.next/server/chunks/777.js:868:166)
 |     at nc (/app/.next/server/chunks/777.js:1243:1031)
 |     at 13842 (/app/.next/server/chunks/520.js:19:12286)
 |     at t (/app/.next/server/webpack-runtime.js:1:128)
 |     at 57427 (/app/.next/server/chunks/520.js:19:10854)
 |     at t (/app/.next/server/webpack-runtime.js:1:128)
 |     at 85068 (/app/.next/server/app/[locale]/page.js:1:10126)
 |     at Object.t [as require] (/app/.next/server/webpack-runtime.js:1:128)
 |     at require (/app/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:16:18490) {
 |   digest: '4174768128'
 | }

代码：

import { initializeApp } from 'firebase/app';
import { getAuth } from 'firebase/auth';
import { getFirestore } from 'firebase/firestore';

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
const auth = getAuth(app); // The source of all my problems

export { auth, db };

请注意，它以前可以在开发和部署模式下工作，并且最近仅在部署模式下停止工作。

我已经承认了 stackoverflow 上的其他答案，并尝试了尽可能多的答案，但我的问题仍然是一样的。

这是

packages.json

的部门

  "dependencies": {
    "@firebase/firestore": "^4.6.5",
    "@formatjs/intl-localematcher": "^0.5.4",
    "@mantine/core": "^7.12.1",
    "@mantine/dates": "^7.12.1",
    "@react-google-maps/api": "^2.19.3",
    "chart.js": "^4.4.4",
    "chartjs-adapter-date-fns": "^3.0.0",
    "chartjs-adapter-moment": "^1.0.1",
    "chartjs-plugin-zoom": "^2.0.1",
    "clsx": "^2.1.1",
    "date-fns": "^3.6.0",
    "date-fns-tz": "^3.2.0",
    "firebase": "^10.12.4",
    "firebase-admin": "^12.3.1",
    "firebase-tools": "^13.15.1",
    "framer-motion": "^11.3.2",
    "js-cookie": "^3.0.5",
    "next": "14.2.5",
    "next-intl": "^3.19.4",
    "next-sitemap": "^4.2.3",
    "node-mailjet": "^6.0.6",
    "plotly.js": "^2.34.0",
    "react": "^18",
    "react-chartjs-2": "^5.2.0",
    "react-datepicker": "^7.3.0",
    "react-day-picker": "^9.0.8",
    "react-dom": "^18",
    "react-flag-kit": "^1.1.1",
    "react-icons": "^5.2.1",
    "react-plotly.js": "^2.6.0",
    "rellax": "^1.12.1",
    "sharp": "^0.33.5",
    "stripe": "^16.8.0",
    "tailwind-merge": "^2.4.0",
    "tailwindcss": "^3.4.1"
  }

npm ls @firebase/app

的结果：

/app # npm ls @firebase/app
[email protected] /app
+-- @firebase/[email protected]
| `-- @firebase/[email protected]
`-- [email protected]
  +-- @firebase/[email protected]
  | `-- @firebase/[email protected] deduped
  +-- @firebase/[email protected]
  | `-- @firebase/[email protected] deduped
  +-- @firebase/[email protected]
  | `-- @firebase/[email protected]
  +-- @firebase/[email protected]
  +-- @firebase/[email protected]
  | `-- @firebase/[email protected] deduped
  +-- @firebase/[email protected]
  | `-- @firebase/[email protected] deduped
  +-- @firebase/[email protected]
  | `-- @firebase/[email protected]
  |   `-- @firebase/[email protected] deduped
  +-- @firebase/[email protected]
  | `-- @firebase/[email protected] deduped
  +-- @firebase/[email protected]
  | `-- @firebase/[email protected] deduped
  +-- @firebase/[email protected]
  | `-- @firebase/[email protected] deduped
  +-- @firebase/[email protected]
  | `-- @firebase/[email protected] deduped
  +-- @firebase/[email protected]
  | `-- @firebase/[email protected] deduped
  +-- @firebase/[email protected]
  | `-- @firebase/[email protected] deduped
  +-- @firebase/[email protected]
  | `-- @firebase/[email protected] deduped
  `-- @firebase/[email protected]
    `-- @firebase/[email protected] deduped

Answer 1

我已经找到解决办法了。 长话短说，它来自于没有修复

package.json

中的 firebase 软件包版本，这会导致它们之间在某些时候不一致，从而导致这个如此不受欢迎的错误。

如果您很快需要几个在它们之间兼容的版本，这里是我在我的

package.json

中使用的版本：

    "@firebase/app": "0.10.10",
    "firebase": "10.13.1",
    "firebase-admin": "12.4.0",
    "firebase-tools": "13.16.0",
    "@firebase/firestore": "4.7.1",

有了这些，一切都应该好起来了。

这是一些细节

不是专业的节点包管理器，可能有更好的解决方案，我欢迎任何人分享它，但让我解释一下。

我相信从两周前到现在，不同的 Firebase 库的新版本已经发布，并且可能无法完美兼容。与此同时，为了在部署应用程序时获得全新的构建，我总是直接从

package-lock.json

构建

node_modules

和

package.json

。这可能并不理想。正如您从一个构建到另一个构建所期望的那样，如果您的依赖项知道更新，那么您的构建将会有所不同，因为不兼容的风险（尽管我确信 npm 处理得很好）会增加。