Upgrade to Firebase JS 8.0.0: Attempted import error: 'app' is not exported from 'firebase/app' (imported as 'firebase')

In version 8.0.0, the Firebase SDK had a breaking change in the way it handles exports:

Breaking change: browser fields in package.json files now point to ESM bundles instead of CJS bundles. Users who are using ESM imports must now use the default import instead of a namespace import.

Before 8.0.0

import * as firebase from 'firebase/app'

After 8.0.0

import firebase from 'firebase/app'

Code that uses require('firebase/app') or require('firebase') will still work, but in order to get proper typings (for code completion, for example) users should change these require calls to require('firebase/app').default or require('firebase').default. This is because the SDK now uses typings for the ESM bundle, and the different bundles share one typings file.

So, you will have to use the new ESM bundle default export:

import firebase from "firebase/app"
firebase.initializeApp({ ... })

If you are using auth you need to import seperately as: import 'firebase/auth'; As you are not importing everything like '* as firebase'.

old way to import firebase : import * as firebase from "firebase/app";

New way to import in 8.0.0 version : import firebase from "firebase/app"

eg: the way i did it. Only the first 2 lines are relevant, the other lines are only added as apart of my code but its quite general tbh!

import firebase from "firebase/app"
import "firebase/auth"

const firebaseConfig = {
  apiKey: XXXX,
  authDomain: XXX,
  projectId: XXXX,
  storageBucket: XXXX,
  messagingSenderId: XXXX,
  appId: XXXX,
}


if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig)
}


export const auth = firebase.auth() 
export const googleAuthProvider = new firebase.auth.GoogleAuthProvider()

replace XXXX by ur data, just being clear :)