Trouble with firebase imports when upgrading to version 9

user_10391186 0
Viewed 309

I tried to move over to the firebase version 9 and I updated all my imports without changing the code and now when I try to do my google sign in I keep on getting this

TypeError: Cannot read properties of undefined (reading 'GoogleAuthProvider')

This is the code that I am having a problem with

import firebase from "firebase/compat/app";
   const provider = new firebase.auth.GoogleAuthProvider();

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
firebaseConfig

// Initialize Firebase
const app = initializeApp(firebaseConfig);

export default app
google-cloud-firestore firebase google-cloud-platform javascript
1 Answers

I would like to suggest you read the guide to update to Firebase v9 from v8, as I see you confirmed earlier you have only updated your imports, but I'm afraid you will need to do some extras to get your code completely upgraded, even though you mentioned you had issues with Authentication, and one of the main steps is to remove compat code from the previous version, especially in that module. Here are the steps:

About the upgrade process

Each step of the upgrade process is scoped so that you can finish editing the source for your app and then compile and run it without breakage. In summary, here's what you'll do to upgrade an app:

  1. Add the version 9 libraries and the compat libraries to your app.
  2. Update import statements in your code to v9 compat.
  3. Refactor code for a single product (for example, Authentication) to the modular style.
  4. Optional: at this point, remove the Authentication compat library and compat code for Authentication in order to realize the app size benefit for Authentication before continuing.
  5. Refactor functions for each product (for example, Cloud Firestore, FCM, etc.) to the modular style, compiling and testing until all areas are complete.
  6. Update initialization code to the modular style.
  7. Remove all remaining version 9 compat statements and compat code from your app.

You are receiving this error because the code you are using to initialize GoogleAuthProvider is from v8, so please substitute it with the following code as suggested by the official documentation:

import  {  GoogleAuthProvider  } from "firebase/auth";  
const provider =  new  GoogleAuthProvider();

If you follow the previous guide missing steps, probably the error will be gone

Finally, I see you have firebaseConfig under your import, and I'm not sure if you are really calling it like this, but I would follow the updated guide.

import  { initializeApp }  from  'firebase/app';   
 
    firebaseConfig =  { 
        //...  
    };  
      
const app = initializeApp(firebaseConfig);
user_169380110
Related