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

Hello Guys, How are you all? Hope You all Are Fine. Today I am implementing firebase in my app But I am facing the following error Attempted import error: ‘firebase/app’ does not contain a default export (imported as ‘firebase’) in ReactJs. So Here I am Explain to you all the possible solutions here.

Without wasting your time, Let’s start This Article to Solve This Error.

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

Today I am implementing firebase in my app But I am facing the following error.

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

Here is my code.

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

How To Solve Attempted import error: ‘firebase/app’ does not contain a default export (imported as ‘firebase’) Error ?

Solution 1: use the /compat folder in imports

If You are using Version 9 then don’t forget that things changed a bit for importing firebase Now there is a “compatibility” option so can use the /compat folder in your imports. Here is an example.

Replace This line.

import firebase from "firebase/app";

With This.

import firebase from 'firebase/compat/app';

Here is some example which is changed in version 9

//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: Downgrade firebase version

If you are facing this error then just downgrade to any of the firebase versions that lowers than v9.

Solution 3: create a Firebase App object Like below example

1. Install Firebase using npm.
2. npm install firebase
3. Initialize Firebase in your app and create a Firebase App object Like this below example.

import { initializeApp } from 'firebase/app';

// TODO: Replace the following with your app's Firebase project
configuration const firebaseConfig = {   //... };

const app = initializeApp(firebaseConfig);

Summery

It’s all About this issue. Hope all solution helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you?

Also, Read

• SyntaxError: invalid syntax to repo init in the AOSP code.