app.initializeApp is not a function when using Firebase Class

Question

I created a Firebase class for my React project utilizing Firebase, but the file returns the following error:

TypeError: firebase_app__WEBPACK_IMPORTED_MODULE_0__.app.initializeApp is not a function

What should I do?

Here is the code:

import 'firebase/app';
import { app } from 'firebase/app';
import 'firebase/auth';


var firebaseConfig = {
    // config stuff
  };

  class Firebase{
      
      constructor(){
          app.initializeApp(firebaseConfig);
          this.auth = app.auth()
      }

       // *** Auth API ***
 
    doCreateUserWithEmailAndPassword = (email, password) =>
    this.auth.createUserWithEmailAndPassword(email, password);

    doSignInWithEmailAndPassword = (email, password) =>
    this.auth.signInWithEmailAndPassword(email, password);

  }

  export default Firebase;

Answer 1

import app from 'firebase/app';

app is default export, there is no need to wrap it with curly braces.

Answer 2

If you want to initialize Firebase using ES6 style imports, it goes like this:

import * as firebase from 'firebase/app'
firebase.initializeApp(firebaseConfig)

Then you go on to use Firebase products:

import 'firebase/auth'
const auth = firebase.auth()

See the firebase module documentation on npm .