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

March 16, 2022

ReactJS

We attempted to add Firebase into our app then faced the Attempted import error: ‘firebase/app’ does not contain a default export (imported as ‘firebase’). 

If you encountered the same error, you might look for all of the solutions to this problem in our post. Let’s get started on fixing the problem.

How Does It Occur?

The error occurred while we tried to implement Firebase in an app, as follows.

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

And this is the code we’re using.

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

How To Solve It?

If you’re running Version 9, keep in mind that the process for loading Firebase has somewhat changed. There exists a “compatibility -” feature, which allows you to include the /compat file. We will demonstrate it in the next part.

The second option is to downgrade the application to any lower versions than v9.

The Solutions

Solution 1

As mentioned earlier, there’s an option which allows you to include the /compat file. You should replace this line.

import firebase from "firebase/app";
With the following line.
import firebase from 'firebase/compat/app';
Here are a few instances of what has changed.
//to use firebase app
import firebase from 'firebase/app'; //older version
import firebase from 'firebase/compat/app'; //v9
//to use auth
import 'firebase/auth'; //older version
import 'firebase/compat/auth'; //v9
//to use firestore
import 'firebase/firestore'; //Older Version
import 'firebase/compat/firestore'; //v9

Solution 2

The second solution is to downgrade it to lower versions than v9.

Solution 3

The third solution is to develop a Firebase object. Here are commands for it.

  1. Using npm to setup Firebase
  2. npm install firebase
  3. Set and activate Firebase in your application. Here’s the example.

Conclusion

The article has shown you how to resolve the Attempted import error: ‘firebase/app’ does not contain a default export (imported as ‘firebase’). 

If you have any concerns regarding this problem, or if you want further assistance, please leave them in the comments at any time. We are here to assist you in fixing the problems.

Scroll to Top