Attempted Import Error: 'firebase/app' Does Not Contain A Default Export (imported As 'firebase')

I tried to work with firabase authentication using React but it says the error, 'Attempted import error: 'firebase/app' does not contain a default export (imported as 'firebase')'.

Solution 1:

Firebase modular SDK (v9) is officially released and npm install firebase now installs this instead of the older namespaced version (v8). If you are using v9 then refactor your code to this:

import { initializeApp } from'firebase/app';
import { getAuth } from'firebase/auth';
import { getDatabase } from"firebase/database";

const app = initializeApp({...config});

exportconst auth = getAuth()
const database = getDatabase();

export { auth, database }

I'd recommend following the documentation and continue using the new modular SDK. If you have an existing and want to use the existing namespaced version, then you can replace your imports with compat libraries as follows:

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

firebase.initializeApp({...config})

const auth = firebase.auth()
const database = firebase.database()

Checkout this video from Firebase for getting started with v9.