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

Question

I am trying to implement firebase in my React application but it seems my version of importing is outdated. Here is my code:

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;

I've replaced my config keys with process.env.REACT_APP_FIREBASE... as they are stored in another local .env file. I've also tried different ways of importing firebase, but it seems most posts are outdated. This is the error I am getting:

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

I also have another file for authContext so I will need to keep the 'auth' keyword in my firebase.js file:

import React, { useContext, useState, useEffect } from "react";
import { auth } from "../firebase";

const AuthContext = React.createContext();

export function useAuth() {
  return useContext(AuthContext);
}

const AuthProvider = ({ children }) => {
  const [currentUser, setCurrentUser] = useState();

  function signup(email, password) {
    return auth.createUserWithEmailAndPassword(email, password);
  }

  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged((user) => {
      setCurrentUser(user);
    });

    return unsubscribe;
  }, []);

  const value = {
    currentUser,
    signup,
  };
  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
};

export default AuthProvider;

Answer 1

With version 9 things changed a bit for importing firebase, but there is no need to downgrade to a previous version, there is a "compatibility" option so can use the /compat folder in your imports, like this

import firebase from 'firebase/compat/app';

From the Firebase upgrade guide:

In order to keep your code functioning after updating your dependency from v8 to v9 beta, change your import statements to use the "compat" version of each import. For example:

// v9 compat packages are API compatible with v8 code
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

Answer 2

The error comes when you are using Firebase greater than V8.

There is an easy fix for this though, firebase includes backward compatibility. All you need to do is change your import from firebase/app to firebase/compat/app.

This will change:

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

to:

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