Firebase getAnalytics() throws Error: Component analytics has not been registered yet

[ky28059]

Describe your environment

• Operating System version: Windows 10 20H2
• Browser version: Chrome 98.0.4758.102
• Firebase SDK version: 9.6.7
• Firebase Product: analytics

Describe the problem

In a NextJS app, attempting to create an Analytics object with getAnalytics(FirebaseApp) throws Error: Component analytics has not been registered yet. Strangely, the other SDKs being used (auth, functions, firestore) function as expected; only analytics throws this unregistered error.

Logging the value of firebase._container.providers.get() for a non-affected SDK (in this case, functions) shows that the component has registered properly, but for analytics the component is null.

Steps to reproduce:

Create a new NextJS project with reactfire and the Firebase SDKs, then attempt to create an analytics provider in npm run dev.
The code I am attempting to execute:

import {ReactNode} from 'react';
import { useFirebaseApp, useInitFirestore, AuthProvider, FunctionsProvider, FirestoreProvider, AnalyticsProvider } from 'reactfire';
import { getFirestore, initializeFirestore, enableIndexedDbPersistence, connectFirestoreEmulator } from 'firebase/firestore';
import { getAuth, connectAuthEmulator } from 'firebase/auth';
import { getFunctions, connectFunctionsEmulator } from 'firebase/functions';
import { getAnalytics } from 'firebase/analytics';


export default function FirebaseProviders(props: {children: ReactNode}) {
    const firebase = useFirebaseApp();

    // Initialize SDKs
    const auth = getAuth(firebase);
    const functions = getFunctions(firebase);
    const analytics = getAnalytics(firebase);
    const firestore = getFirestore(firebase);

    // Set up emulators on dev build
    if (process.env.NODE_ENV !== 'production') {
        connectAuthEmulator(auth, 'http://localhost:9099');
        connectFunctionsEmulator(functions, 'localhost', 5001);
        connectFirestoreEmulator(firestore, 'localhost', 8080);
    }

    return (
        <AuthProvider sdk={auth}>
            <FunctionsProvider sdk={functions}>
                <FirestoreProvider sdk={firestore}>
                    <AnalyticsProvider sdk={analytics}>
                        {props.children}
                    </AnalyticsProvider>
                </FirestoreProvider>
            </FunctionsProvider>
        </AuthProvider>
    )
}

which is rendered within _app.tsx like so:

import {AppProps} from 'next/app';
import {FirebaseAppProvider} from 'reactfire';
import FirebaseProviders from '../components/firebase/FirebaseProviders';
import {fbconfig} from '../firebase/config';


export default function App({ Component, pageProps }: AppProps) {
    // ...

    return (
        <FirebaseAppProvider firebaseConfig={fbconfig}>
            <FirebaseProviders>
                {/* ... */}
            </FirebaseProviders>
        </FirebaseAppProvider>
    );
}

[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.

[hsubox76]

1. Does this error happen if reactfire is not part of the app?
2. Is there an earlier version of Firebase where the error doesn't happen?

[ky28059]

I haven't tested without reactfire, but getAnalytics() does not error when used (with the same code) in a Create React App project; this problem only started cropping up when I ported the project to Next. Originally the firebase version was 9.0.2, but I updated to 9.6.7 in attempting to debug this issue.

[Jbz797]

Same problem with AngularFire, need to come back to 9.6.6 to make it work.

[ky28059]

Interestingly enough, for me reverting to 9.6.6 instead gives Component auth has not been registered yet.

[erik-metz]

Same issue here, but on my end it is also with function, app-check, storage and analytics.
auth and firestore is working

"firebase": "^9.6.6"
"reactfire": "^4.2.1"

export const FirebaseProvider = ({ children }: { children: JSX.Element }): JSX.Element => {
  const firebaseConfigEnv = process.env.NEXT_PUBLIC_FB_CONFIG;

  return (
    <FirebaseAppProvider firebaseConfig={firebaseConfig}>
      {children}
    </FirebaseAppProvider>
  );
};

const app = useFirebaseApp();
const functions = getFunctions(app)
--> Uncaught Error: Service functions is not available

const appCheck = initializeAppCheck(app, {provider: new ReCaptchaV3Provider(process.env.NEXT_PUBLIC_FB_APP_CHECK_PUBLIC_KEY), isTokenAutoRefreshEnabled: true,});
--> Error: Component app-check has not been registered yet

const storage = getStorage(app)
--> Error: Service storage is not available

const analytics = getAnalytics(app)
--> Error: Component analytics has not been registered yet

EDIT:
with downgrading to:
"firebase": "^9.6.5"
or
"firebase": "^9.6.4"
I also get the error for auth, firestore and all the other providers

const auth = getAuth(app)
--> Error: Component auth has not been registered yet

const firestore = getFirestore(app)
--> Error: Service firestore is not available

[erik-metz]

Quickfix for me was uninstalling firebase package and re-installing, works for local and production.

[MaciejCaputa]

Quickfix for me was uninstalling firebase package and re-installing, works for local and production.

I also tried that, any multiple combinations of reactfire and firebase versions. Does somebody have an idea how to fix it?

[hsubox76]

Has anyone reported this issue in the reactfire repo? They may be able to pinpoint the issue better. If anyone is experiencing the same issue in an app that is not using reactfire, feel free to update in this thread.

[ibraelillo]

I'm also facing this issue. Upgraded to 9.6.8 and then I get "cannot resolve _delegate"

[bageren]

I'm facing a similar with Angular, firebase 9.8.0 and @angular/fire 7.3.0. For me it seems to only be functions not working. I'm getting the error "Service functions is not available"

[dennis3124]

Facing similar issue without using reactfire. Getting the error Error: Component analytics has not been registered yet. I went down from 9.8.1 to 9.6.6 and analytics worked. Not sure if it was 9.6.6 that fixed it or me reinstalling @firebase that fixed it

[hsubox76]

I have seen similar errors before caused by different versions of Firebase packages being out of sync, such as having an old @firebase/analytics and a newer @firebase/app or vice versa, which sometimes happens due to yarn.lock/package-lock.json problems or npm/yarn caches.

The first thing I would try is to delete node_modules and any lockfiles (package-lock.json/yarn.lock) and reinstall. If you haven't tried this yet, make sure to try it first.

Another cause of this has been users somehow initialize 2 copies of the Firebase app instance, and some of the packages end up registered to one of the FirebaseApps, and some of the packages end up registered to another one.

• This can happen if there's multiple versions of @firebase/app in your app. Double check if this is the case by running npm ls @firebase/app in the root of your project and seeing if there's more than 1 version installed.
• Sometimes people may call initializeApp() multiple times somehow with different parameters, creating more than one FirebaseApp.

If none of this applies, please submit a minimal reproduction of this issue that doesn't include reactfire or angularfire. Just a small repo with only firebase installed, and a couple lines of code initializing the Firebase app and the problem packages.

[bageren]

@hsubox76 Thanks, it seems to be working for me now. I had already tried deleting node_modules, so I guess it was deleting my yarn.lock that did the trick.

[hsubox76]

I'm going to close this but if anyone is still having problems that the above suggestions do not fix, let me know and I will reopen it.