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"