Firebase : Uncaught Error: Component analytics has not been registered yet

Question

I'm working on getting firebase working for a webapp project for class. It has not been easy. I keep getting errors, and every change I make creates a different error. Firebase is initialized in the project. Here is my most recent error:

>provider.ts:239 Uncaught Error: Component analytics has not been registered yet
>>at Provider.initialize (provider.ts:239),
>>at initializeAnalytics (api.ts:108),
>>at firebase-config.js:23,
>>>initialize @ provider.ts:239,
>>>initializeAnalytics @ api.ts:108,
>>>(anonymous) @ firebase-config.js:23

This error seems to be stemming from my firebase-config file, but I'm genuinely lost:

   // Import the functions you need from the SDKs you need
        //import * as firebase from 'firebase/app'; 
        import { initializeApp } from '../node_modules/firebase/firebase-app.js';
        import { initializeAnalytics , getAnalytics } from '../node_modules/firebase/firebase-analytics.js';
        
        
        const firebaseConfig = {
          [config keys]
        };
        
        // Initialize Firebase
        const fb_app = initializeApp(firebaseConfig); // returns an app 
        initializeAnalytics(fb_app); // added to circumvent error, but it still appears.
        const analytics = getAnalytics(fb_app);
        
        console.log(analytics); 
        export {fb_app};

Any help would be appreciated. Thanks

Answer 1

If you are using v9 SDK, your import statements must be

import { initializeApp } from 'firebase/app';
import { initializeAnalytics , getAnalytics } from 'firebase/analytics';

Not the files directly. There is a relevant discussion here: https://issueexplorer.com/issue/firebase/firebase-js-sdk/5597