Firebase: No Firebase App ‘[DEFAULT]’ has been created in React app

[flyon]

Hey, I've been following the guide but I'm stuck at creating a token. I'm getting this error:

FirebaseError
Firebase: No Firebase App '[DEFAULT]' has been created - call initializeApp() first (app/no-app).

I've installed the following package.json:

    "@capacitor-firebase/messaging": "^5.0.0",
    "@capacitor/core": "^5.0.3",
    "firebase": "^9.22.1",

The errors say call initializeApp first. But I'm definitly calling initializeApp() first.. Perhaps not in the right way or place? The guide is for angular, so I'm trying to make it work for React. Below is a simplified setup without any components. Just calling initialize and then trying to get a token.

import {Capacitor} from '@capacitor/core';
import {initializeApp} from 'firebase/app';
import {FirebaseMessaging,GetTokenOptions} from '@capacitor-firebase/messaging';

export async function requestPermissions() {
  await FirebaseMessaging.requestPermissions();
}

export async function getTokenFirebase() {
  const options: GetTokenOptions = {
    vapidKey: '[removed]',
  };
  if (Capacitor.getPlatform() === 'web') {
    console.log('web');
    options.serviceWorkerRegistration = await navigator.serviceWorker.register('firebase-messaging-sw.js');
  }
  const {token} = await FirebaseMessaging.getToken(options);

  console.log('getToken', token);
  return token;
}

const initializeFirebase = () => {
  if (Capacitor.isNativePlatform()) {
    return;
  }
  return initializeApp({
    apiKey: '[removed]',
    authDomain: '[removed]',
    projectId: '[removed]',
    storageBucket: '[removed]',
    messagingSenderId: '[removed]',
    appId: '[removed]',
    measurementId: '[removed]',
  });
};
//initialize firebase right at the start when the app starts up
let app = initializeFirebase();
console.log('Firebase initialized',app);
getTokenFirebase().then((token) => {
  console.log(token);
})

The logs show that firebase is initialised with an app

Any idea why this happens? or how to get past this error? help is much appreciated as I've been stuck on this for a while now.

[robingenz]

Try to import @capacitor-firebase/messaging after you have initialized Firebase.

[flyon]

@robingenz Thanks, i've tried that now, but unfortunately the error remains the same.

I'm using dynamic imports now to ensure @capacitor-firebase/messaging is imported after I initialize Firebase like so:

import {lazy, useEffect, useState} from 'react';
import {Button} from '../components/ui/forms/Button';
import {Capacitor} from '@capacitor/core';
import {initializeApp} from '@firebase/app';

const initializeFirebase = () => {
  if (Capacitor.isNativePlatform()) {
    return;
  }
  return initializeApp({
    apiKey: '[removed]',
    authDomain: '[removed]',
    projectId: '[removed]',
    storageBucket: '[removed]',
    messagingSenderId: '[removed]',
    appId: '[removed]',
    measurementId: '[removed]',
  });
};
//initialize firebase right at the start before the component renders
let app = initializeFirebase();

let reqPermission, token;
const Home = () => {

  useEffect(() => {
    // Dynamically import the module AFTER initializeApp, when the component has already rendered
    import('@capacitor-firebase/messaging').then((module) => {
      reqPermission = module.FirebaseMessaging.requestPermissions();
      token = getTokenFirebase(module.FirebaseMessaging);
    });
  }, []);

  const getTokenFirebase = async (messaging) => {
    const options: any = {
      vapidKey: '[removed]',
    };
    if (Capacitor.getPlatform() === 'web') {
      options.serviceWorkerRegistration = await navigator.serviceWorker.register('firebase-messaging-sw.js');
      console.log('web', options.serviceWorkerRegistration);
    }
    const {token} = await messaging.getToken(options);

    return token;
  };

  return (
      <div>Firebase Capacitor Test</div>
  );
};

messaging.getToken(options); still triggers the same No Firebase App ‘[DEFAULT]’ error

[robingenz]

That's how it should work. I don't have any experience with React, but if you create a minimal, reproducible example as public GitHub repo, I'd be happy to take a closer look.

[flyon]

It's working for us now. When we made a codesandbox test setup with react-create-app it was working.
In our own setup we discovered firebase/app was being imported as CJS whilst the dynamic import of @capacitor-firebase/messaging would import firebase/app as ESM. Basically two different firebase versions were being loaded.

For now we fixed that by switching our app to ESM. Once the same firebase version was loaded in both instances it worked as expected. I'll close this discussion