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

Question

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;

Answer 1

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.