Service firestore is not available with v12.5.0

[mickdewald]

Operating System

macOS

Environment (if applicable)

Node.JS 20

Firebase SDK Version

12.5.0

Firebase SDK Product(s)

Firestore, Functions

Project Tooling

Turborepo, PNPM

Detailed Problem Description

Since v12.5.0 I suddenly get the error Service firestore is not available (and analogous for other service Service functions is not available) without changing my firebase init

The error happens at either of these places

  dbDev = getFirestore(app, "development");
  dbDefault = getFirestore(app);
  functions = getFunctions(app, firebaseFunctions.region);

// packages/config-firebase-client/src/init-client.ts

"use client";

import { type Auth, getAuth, GoogleAuthProvider } from "firebase/auth";
import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import "firebase/compat/firestore";
import { type Firestore, getFirestore } from "firebase/firestore";
import { type Functions, connectFunctionsEmulator, getFunctions } from "firebase/functions";
import { getStorage, type FirebaseStorage } from "firebase/storage";

import { firebaseFunctions } from "@repo/config/site";
import { isDevOrLocalPrd } from "@repo/utils/development";

// Firebase Client Configuration
const firebaseClientConfig = {
  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,
  measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
};

// Vars to export
let app: firebase.app.App;
export let dbDev: Firestore; // db for dev purposes
export let dbDefault: Firestore; // db for dev purposes
export let functions: Functions;
export let storage: FirebaseStorage;
export let auth: Auth;
export let provider: GoogleAuthProvider;

// Init Firebase components
function initFirebaseVars(app: firebase.app.App) {
  console.log("[firebase/config-client] init vars for app:", app.name);

  dbDev = getFirestore(app, "development");
  dbDefault = getFirestore(app);
  functions = getFunctions(app, firebaseFunctions.region);
  storage = getStorage(app);
  auth = getAuth(app);
  auth.languageCode = "de"; // For phone auth https://firebase.google.com/docs/auth/web/phone-auth?hl=en&authuser=0
  provider = new GoogleAuthProvider();

  // Connect to the local emulator if running in development mode
  if (isDevOrLocalPrd) {
    connectFunctionsEmulator(functions, "127.0.0.1", 5001);
  }
}

// Initialize Firebase
try {
  // Check if an app already exists
  app = firebase.app();
  console.log("[firebase/config-client] App already exists");
} catch (error: any) {
  // If the app does not exist, initialize it
  if (error.code === "app-compat/no-app") {
    console.log("[firebase/config-client] No App exists");
    app = firebase.initializeApp(firebaseClientConfig);
  } else {
    console.error("[firebase/config-client] Error initializing Firebase:", error.message);
    throw error;
  }
}
// Use the app instance for further operations
initFirebaseVars(app);

I haven't seen any breaking changes, so I wonder what is suddenly wrong with my code.
A downgrade to v12.4.0 immediately solves this error.

Steps and code to reproduce issue

Update to v12.5.0 and try to init with my code above. It fails immediately in initFirebaseVars at

  dbDev = getFirestore(app, "development");
  dbDefault = getFirestore(app);
  functions = getFunctions(app, firebaseFunctions.region);
   ...

[google-oss-bot]

I couldn't figure out how to label this issue, so I've labeled it for a human to triage. Hang tight.

[looptheloop88]

Hi @mickdewald, thanks for the report. I attempted to reproduce the issue using the latest SDK version 12.5.0, but was unsuccessful.

If possible, could you please try deleting the node_modules directory and the package-lock.json file, then run npm install command? Let us know the result.

[mickdewald]

Hi @mickdewald, thanks for the report. I attempted to reproduce the issue using the latest SDK version 12.5.0, but was unsuccessful.

If possible, could you please try deleting the node_modules directory and the package-lock.json file, then run npm install command? Let us know the result.

That is not the problem. I do that every time. My script deletes every temp or build folder and the complete reinstallation of all the dependencies. A clean slate.

Removing build directories...
Removing dist directories...
Removing .next directories...
Removing ios/build directories...
Removing android/build directories...
Removing android/app/build directories...
Removing .metro directories...
Removing .turbo directories...
Removing node_modules directories...
Removing lock files...
Removing error logs...
Cleaning Metro cache...

Here is the package.json of the packages in my monorepo with the Firebase client code.

{
  "name": "@repo/config-firebase-client",
  "version": "0.1.0",
  "private": true,
  "exports": {
    ".": "./src/index.ts",
    "./*": [
      "./src/*.tsx",
      "./src/*.ts"
    ],
    "./firestore": "./src/firestore.ts",
    "./init-client": "./src/init-client.ts",
    "./storage": "./src/storage.ts"
  },
  "dependencies": {
    "@repo/config": "workspace:*",
    "@repo/utils": "workspace:*",
    "firebase": "12.5.0"
  },
  "devDependencies": {
    "@types/node": "^24",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "@repo/config-typescript": "workspace:*"
  },
  "peerDependencies": {
    "next": "^16",
    "react": "^19"
  }
}

and it gets called like this import { auth } from "@repo/config-firebase-client/init-client"; here

// packages/firebase/src/use-firebase.ts

import { onAuthStateChanged, type User } from "firebase/auth";
import { useEffect } from "react";

import { auth } from "@repo/config-firebase-client/init-client";
...

export const useFirebase = (...) => {

  useEffect(() => {
    // Listen to auth state changes
    const unsubscribeAuthState = onAuthStateChanged(auth, async (userAuth) => {
      ...
    });

    return () => {
      unsubscribeAuthState();
    };
  }, []);

  return null;
};

Can I provide you with some additional info to solve this?
I have really no idea what's going on because the exact same code is working fine on v12.4.0 an lower versions.