javascript - Attempted import error: 'app' is not exported from 'firebaseapp' (imported as &

admin管理员组

文章数量:1278985

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;

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;

• javascript
• firebase
• npm
• firebaseui

Share Improve this question Follow edited Oct 31, 2020 at 5:16 Doug Stevenson 318k3636 gold badges454454 silver badges472472 bronze badges asked Oct 31, 2020 at 4:24 Xi LiuXi Liu 62911 gold badge1111 silver badges2626 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 8

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.

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

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

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'

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/pat/app'

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

本文标签：