Service messaging is not available

[lfernandes00]

Operating System

Windows 10

Browser Version

Chrome v118.0.5993.88

Firebase SDK Version

9.9.4

Firebase SDK Product:

Messaging

Describe your project's tooling

I have a NextJS app (v12)

Describe the problem

The problem is when i try to configure the firebase file, the following error is occuring:

Error: Service messaging is not available

I also have this error:

Steps and code to reproduce issue

Firebase.ts:

import { initializeApp } from "firebase/app";
import { getMessaging, getToken } from "firebase/messaging";

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_MESSAGE_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
  measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID
};

const app = initializeApp(firebaseConfig);

const messaging = getMessaging(app);

PS: I've seen some threads that recommend downgrading firebase to v8, but I'd like to keep it in v9. Is there any way to fix this?

[jbalidiong]

Hi @lfernandes00, thanks for reaching out and apologies for the delay. I was able to replicate the behavior you've mentioned. Let me check what we can do for this issue or bring someone here that can provide more context about it. I’ll update this thread if I have any information to share.

[zwu52]

The error is thrown after the checker here: https://github.com/firebase/firebase-js-sdk/blob/master/packages/messaging-compat/src/messaging-compat.ts#L71C2-L71C2.

@lfernandes00 can you check which statement(s) is evaluating to false?

[richterrene]

Chiming in here, we're facing the same issue after trying to upgrade from 7.17.0 to 10.5.2

Any advice / news on this one? Thanks a lot!

[jayachandra9]

any fix for above issue,im facing the same with Error: Service messaging is not available "firebase": "^9.9.1","next": "13.2.4",

[Scottie35]

Exact same issue here, still. Trying to move from 8.10.1 -> 10.8.0

[gigallo]

Hi

we have the same problem only when we build the angular project with "--configuration production" option. Any idea why and how to solve it?

thanks

[othman95]

any updates on this ?

[Aleksandern]

Remove all Firebase packages, then install only the firebase package and check if the issue still exists.

My project is a monorepo and in my case @react-native-firebase/app caused that issue. So, I installed exactly the same firebase version as @react-native-firebase/app has in dependencies. At the moment it's "firebase": "10.12.2" so I installed firebase@10.12.2 and the issue is gone.

[hsubox76]

This problem is often caused by a messy npm install, or some other build config issue that causes your app to import "app" and "messaging" from two separate namespaces. In the case of the original post, where the user showed their imports, the imports look correct and are in the same file, so I would recommend a clean npm install:

rm -fr node_modules package-lock.json yarn.lock
npm install (or yarn install)

People may also be installing different kinds of firebase packages as mentioned in the post right above this one.

Another problem I have seen is that users import firebase/app in one file and firebase/messaging (or other product) in another file, and compile one file using CJS and the other using ESM, causing it to grab the app CJS bundle and the messaging ESM bundle (or vice versa), so that they're not aware of each other. This could be a problem in Next, which may be grabbing a CJS bundle in the server (Node) rendering context and an ESM bundle in a client rendering context. I'm not that familiar with Next so maybe Next users can think about how this could happen (a file could have a client/server split somewhere it shouldn't?)

Since this issue has many causes (there are many ways users can be grabbing Firebase "app" and product bundles from different sources), it's very important that you post the specific details of your situation (at least your imports and some info about your build config, most ideally a minimal repro) because the fix for you may be very different than the fix for the original user.