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

Question

After upgrading to 8.0.0, I get the following error:

Attempted import error: 'initializeApp' is not exported from 'firebase/app' (imported as 'firebase').

My import looks like this:

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

TypeScript also complains:

Property 'initializeApp' does not exist on type 'typeof import("/path/to/my/file")'. ts(2339)

How do I fix this?

Answer 1

I solved

import firebase from 'firebase/compat/app';

const firebaseConfig = {...};

const Firebase = firebase.initializeApp(firebaseConfig);

Answer 2

Version 9 provides a set of compat packages that are API compatible with Version 8. They are intended to be used to make the upgrade to the modular API easier by allowing you to upgrade your app piece by piece. See the Upgrade Guide for more detail.

To access the compat packages, use the subpath compat like so:

// v9 compat packages are API compatible with v8 code

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

Answer 3

2021 update:

Firebase v9 comes with new API designed to facilitate tree-shaking (removal of unused code). This will make your web app as small and fast as possible.

The /compat packages are created for compatibility and to make the upgrade to the modular API easier. With the downside of not getting the performance perks. To get the performance benefits of the modular design, use getApps instead:

import { getApps, initializeApp } from 'firebase/app';

if (!getApps().length) {
  initializeApp({
    // your config
  });
}

From the library's JSDoc: getApps return A (read-only) array of all initialized apps..

There is also a getApp function that When called with no arguments, the default app is returned. When an app name is provided, the app corresponding to that name is returned. An exception is thrown if the app being retrieved has not yet been initialized.

Answer 4

I solved my problem using this kind of 'import' approach in firebase version 9.6.1 :

import "firebase/auth"
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

const firebaseConfig = {
 apiKey: "AIzaSyBbaKxbqufRCfrwGpQ3sfuBgIifIhTCP1A",
 authDomain: "facebook-clone-f4994.firebaseapp.com",
 projectId: "facebook-clone-f4994",
 storageBucket: "facebook-clone-f4994.appspot.com",
 messagingSenderId: "593047789391",
 appId: "1:593047789391:web:11459d7b291b9465542f3a",
 measurementId: "G-FNW1K23DBJ"
};


const firebaseApp = firebase.initializeApp(firebaseConfig);
const db = firebaseApp.firestore();
const auth = firebase.auth();
const provider = new firebase.auth.GoogleAuthProvider();


export { auth, provider };
export default db;

Answer 5

I solved similar problem for firebase version > 9, by using in the route: /compat/ Eg: import firebase from "firebase/compat/app";

Answer 6

I had faced a similar problem while trying to use Firebase authentication in an old site.

This solved the problem:

npm uninstall firebase step
npm install firebase

Answer 7

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 working with SDK version 9.0, read this question instead:

• How do I fix a Firebase 9.0 import error? "Attempted import error: 'firebase/app' does not contain a default export (imported as 'firebase')."

Answer 8

This is the new firebase 9 updates :

   import { initializeApp } from "firebase/app";
   import { getMessaging, getToken } from "firebase/messaging";

Answer 9

try using this for firebase 9 above

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

or you can read more on: https://firebase.google.com/docs/web/modular-upgrade

Answer 10

Its an update issue, while you can fix how you import firebase, you can't fix how it's imported imported in libraries you use, you'll have wait for those library to be updated

Before 8.0.0 import * as firebase from 'firebase/app'

After 8.0.0 import firebase from 'firebase/app'

Library's like FirebaseUI authentication have not been updated, and I've been waiting for FirebaseUI update since april

https://stackoverflow.com/a/66708552/12490386

Answer 11

tip from my own mistakes: make sure all spellings are correct, and try using this 😁import firebase from 'firebase'

Answer 12

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 :)

Answer 13

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