Attempted import error

How to resolve the following error:

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

Copy and paste the code below into your App.js file (this should replace the App.js code in the repo)

`
import React, { Component } from 'react';
import withFirebaseAuth from 'react-with-firebase-auth'

// Removing these imports

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

// With the above imports, I received the following error
// Attempted import error: 'initializeApp' is not exported from 'firebase/app' (imported as 'firebase').

// By then adding these imports, I successfully restored compatability
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';

import firebaseConfig from './firebaseConfig';
import logo from './logo.svg';
import './App.css';

const firebaseApp = firebase.initializeApp(firebaseConfig);

class App extends Component {
render() {
const {
user,
signOut,
signInWithGoogle,
} = this.props;

return (

{
user
?

Hello, {user.displayName}

:

Please sign in.

}

{
user
? Sign out
: Sign in with Google
}

const firebaseAppAuth = firebaseApp.auth();

const providers = {
googleProvider: new firebase.auth.GoogleAuthProvider(),
};

export default withFirebaseAuth({
providers,
firebaseAppAuth,
})(App);

`

// In closing, I would like to express my gratitude towards the repo creator. This repo has been helpful. Thank you for contributing to open source and pushing the world forward. Best, Zary