react-firebaseui StyledFirebaseAuth is not getting compiled - reactjs

Question

I am using react-firebaseui for authentication, according to the documentation i have written the code
import React from "react";
import StyledFirebaseAuth from "react-firebaseui/StyledFirebaseAuth";
import firebase from "firebase";
const firebaseConfig = {
...
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
// Configure FirebaseUI.
const uiConfig = {
// Popup signin flow rather than redirect flow.
signInFlow: "popup",
// Redirect to /signedIn after sign in is successful. Alternatively you can provide a callbacks.signInSuccess function.
// signInSuccessUrl: '/signedIn',
// We will display Google and Facebook as auth providers.
signInOptions: [firebase.auth.GoogleAuthProvider.PROVIDER_ID],
};
export const SignInWith = () => (
<>
<p>Login</p>
<StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={firebase.auth()} />
</>
);
but i keep getting this error
./node_modules/firebaseui/dist/esm.js
Attempted import error: 'app' is not exported from 'firebase/app' (imported as 'firebase').`.
I tried importing firebase using import firebase from 'firebase/app, but still the same error.
I tried commenting StyledFirebaseAuth import and tag and it is working, so I am sure the problem is with react-firebaseui.
This is my package.json
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.11.0",
"#material-ui/icons": "^4.9.1",
"#reduxjs/toolkit": "^1.4.0",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"#types/jest": "^24.9.1",
"#types/node": "^12.19.2",
"#types/react": "^16.9.54",
"#types/react-dom": "^16.9.9",
"#types/react-redux": "^7.1.9",
"axios": "^0.21.0",
"firebase": "^8.0.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-firebaseui": "^4.1.0",
"react-redux": "^7.2.2",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.0",
"typescript": "^3.8.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#types/react-router-dom": "^5.1.6",
"babel-plugin-import": "^1.13.1",
"customize-cra": "^1.0.0",
"react-app-rewired": "^2.1.6"
}
}
Thank you for any help.

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 and react-firebaseui support the breaking changes in 8.0.0.

Answer 2

import firebase has changed with the version of 9.0.0, now there is compatibility available no need to downgrade, so you can use /compat folder in your imports,
import firebase from 'firebase/compat/app'