reactjs firebase next.js firebase-authentication

Error: Component auth has not been registered yet - React, NextJs, Firebase auth

Yet another occurence of this famous issue.

I use docker compose to run my app. Here are the logs:

 | 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'
 | }

The code:

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 };

Please note that it used to work before in dev and deployment mode and it stopped working only very recently on deployment mode only.

I have acknowledged the other answers on stackoverflow as well as have tried as many responses as possible my problem remains the same.

Here are the deps of 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"
  }

result of npm ls @firebase/app:

/app # npm ls @firebase/app
my-app@0.1.0 /app
+-- @firebase/firestore@4.7.4
| `-- @firebase/app@0.10.15
`-- firebase@10.14.1
  +-- @firebase/analytics@0.10.8
  | `-- @firebase/app@0.10.15 deduped
  +-- @firebase/app-check@0.8.8
  | `-- @firebase/app@0.10.15 deduped
  +-- @firebase/app-compat@0.2.43
  | `-- @firebase/app@0.10.13
  +-- @firebase/app@0.10.13
  +-- @firebase/auth@1.7.9
  | `-- @firebase/app@0.10.15 deduped
  +-- @firebase/data-connect@0.1.0
  | `-- @firebase/app@0.10.15 deduped
  +-- @firebase/firestore-compat@0.3.38
  | `-- @firebase/firestore@4.7.3
  |   `-- @firebase/app@0.10.15 deduped
  +-- @firebase/firestore@4.7.3
  | `-- @firebase/app@0.10.13 deduped
  +-- @firebase/functions@0.11.8
  | `-- @firebase/app@0.10.15 deduped
  +-- @firebase/installations@0.6.9
  | `-- @firebase/app@0.10.15 deduped
  +-- @firebase/messaging@0.12.12
  | `-- @firebase/app@0.10.15 deduped
  +-- @firebase/performance@0.6.9
  | `-- @firebase/app@0.10.15 deduped
  +-- @firebase/remote-config@0.4.9
  | `-- @firebase/app@0.10.15 deduped
  +-- @firebase/storage@0.13.2
  | `-- @firebase/app@0.10.15 deduped
  `-- @firebase/vertexai-preview@0.0.4
    `-- @firebase/app@0.10.15 deduped

Solution

I have found the solution. Long story short, it comes from not fixing the firebase package versions in package.json which leads, at some point to an inconsistency between them resulting in this so disliked error.

If you need a quick fix, here are some firebase deps compatible between each other which I am using in my 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",

With these, everything should be fine.

Here are some details

Not being a professional node package manager there might be better solutions and I welcome anybody to share about it but let me explain.

I believe that from 2 weeks ago to now, new versions of different firebase libraries have been released and might not be perfectly compatible together. In the meantime, in order to have a fresh build when deploying my app, I always build package-lock.json and node_modules directly from package.json. Which might not be ideal. As you can expect from one build to another, if your dependencies know an update, your builds will be different as risks of incompatibility (although very well handled by npm I am sure) grow.