CODEWITHSUNDEEP
javascriptfirebasenpmfirebaseui
Xi Liu
Xi Liu

Reputation: 629

Attempted import error: 'app' is not exported from 'firebase/app' (imported as 'firebase')

Encountered a very weird issue. When trying to import firebase, I got the following error:

./node_modules/firebaseui/dist/esm.js
Attempted import error: 'app' is not exported from 'firebase/app' (imported as 'firebase').

The structure of my project is: A parent folder containing a react client folder. I installed firebase in the parent folder, initialize a firebase app in the firebaseConfig file in the parent folder, and then import it into the react client folder.

I later tried installing firebase in the react client folder and import firebase in it. Weirdly, after I installed firebase in the client folder, doing "npm ls firebase" in the client folder returns empty, even though firebase is indeed in the node modules and package.json in the client folder. I am wondering what caused the problem.

firebaseConfig.js in the parent folder

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

const firebaseConfig = {
    ......
};

firebase.initializeApp(firebaseConfig);

export default firebase;

Upvotes: 4

Views: 6673

Answers (5)

Ali-Vakili
Ali-Vakili

Reputation: 26

First determine your firebase version:

firebase --version

If you are using version 9, replace this line

import firebase from "firebase/app"

with

import firebase from 'firebase/compat/app'

Reference: https://exerror.com/attempted-import-error-firebase-app-does-not-contain-a-default-export-imported-as-firebase/

Upvotes: -1

Mythili
Mythili

Reputation: 424

When I installed firebase, by default it has installed the version of 9.0.0. And I see the mentioned error but when I changed it to 8.9.1 and imported it as below it worked for me.

import firebase from 'firebase/app'

Upvotes: 0

Suraj
Suraj

Reputation: 1

Firebase version I was using Firebase>8.0.0
Line of code I was using import * as firebase from 'firebase/app'; this import works for Firebase<8.0.0

Please go and use this import firebase from 'firebase/app';
if you are using firebase>8.0.0 as of now (4th Aug 2021) things might change on later versions.
This is because you are using the wrong line of code, nothing wrong with the system.
Go and check the package.json file on your project folder.

Check here package.json

Checking firebase version on package.json file

Upvotes: 0

Chukwuemeka Maduekwe
Chukwuemeka Maduekwe

Reputation: 8526

Its an update issue, while you can fix how you import firebase, you can't fix how it's imported imported in libraries you use, you'll have wait for those library to be update.

Before 8.0.0

import * as firebase from 'firebase/app'

After 8.0.0

import firebase from 'firebase/app'

Library's like FirebaseUI authentication

Upvotes: 2

Doug Stevenson
Doug Stevenson

Reputation: 317372

Unfortunately, you've upgraded your "firebase" dependency to 8.0.0 but the "firebaseui" dependency doesn't support it yet. You will have to temporarily downgrade firebase to version 7.24.0 until firebaseui supports the breaking changes in 8.0.0.

Upvotes: 8

Related Questions