I was trying to add easy sign-in UI provided by Firebase to my web-app (check this out: https://firebase.google.com/docs/auth/web/firebaseui?authuser=0 ), but it seems like there are compatibility issues.

Whenever I try to install the package using npm and the following code: $ npm install firebaseui --save, and then import it into my firebase-config.js file like so:

import { initializeApp } from "firebase/app";
import { getFirestore } from 'firebase/firestore';
var firebaseui = require('firebaseui');

I get the following error in React:

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

Obviously there was a shift in the way modules get imported. I am aware of the solution by downgrading the firebase app to any version below v9, however, these versions start breaking my code in other parts. Using the compatibility version by importing: import { initializeApp } from "firebase/comp/app"; does not help and I get the same error as above.

Has anyone been able to find a workaround of how to elegantly incorporate the firebaseui authentication package into the current v9 of firebase?

Help would be greatly appreciated!