Attempted import error: 'firebase/app' does not contain a default export (imported as 'firebase')

Question

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')". If I use import * as firebase from "firebase/app" then rest off the code showing errors.

import firebase from 'firebase/app';
import 'firebase/auth';
    
const app = firebase.initializeApp({
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID
});
    
export const auth = app.auth();

export default app;

Answer 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});

export const 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.