Firebase error - call Firebase App.initializeApp() -

Question

I have problem with firebase in react. It shows "Uncaught FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app)." error. I was working on another page of website and everything was fine, I reloaded the page and suddenly an error occured. I didn't change anything connected to firebase. I was looking at the other questions but nothing fix the issue. The subpages which uses firebase are white, there is nothing there but other subpages without firebase are working well. This is the screenshot.

Below the code:

import { getDatabase, ref, set, onValue} from "firebase/database";
import {uid} from "uid";

let animals = [];
const Care= () => {
    const uuid = uid();
    const [name,setName] = useState("");
    const [type,setType] = useState("");
    const [sex,setSex] = useState("");
    const [age,setAge] = useState("");
    const [story,setStory] = useState("")
    const [photo,setPhoto] = useState("")
    const [animalId,setAnimalId] = useState("")
    const [from, setFrom] = useState("")
    const [to, setTo] = useState("")


const handleSubmit = (e) => {
    e.preventDefault();

    set(ref(db, `/Care/${uuid}`), {
        name: name,
        type: type,
        sex: sex,
        age: age,
        story: story,
        photo: photo,
        from:from,
        to:to,
        id:uuid

    }).then(() =>{
        alert("Udało się! Zwierzak został dodany!")
    })
        setName("")
        setType("")
        setSex("")
        setAge("")
        setStory("")
        setPhoto("")
        setAnimalId("")
    }


    const db = getDatabase();
    const starCountRef = ref(db, `/Care`);
    onValue(starCountRef, (snapshot) => {
        let data = snapshot.exportVal();
        animals = [];
        
        Object.keys(data).map((id) => {
        animals.push(data[id])
        })
    });

    

    return (
        <>
            <div className="care-header">
                <div className="header-content">
                    <h1 className="header-title">Znajdź opieke dla zwierzaka!</h1>

                </div>
            </div>
            <div className="form-wrapper-care">
                <h3 className="form-title">Infomacje o zwierzaku </h3>
                <form action="" className="form" onSubmit={handleSubmit}>
                    <input
                        className="default-input"
                        type="text"
                        placeholder="Imię"
                        defaultValue={name}
                        onChange={(e) => setName(e.target.value)}
                    />
                    <select
                        className="select-input"
                        name=""
                        id=""
                        defaultValue={type}
                        onChange={(e) => setType(e.target.value)}
                    >

                        <option value="Wybierz gatunek">Wybierz gatunek</option>
                        <option value="Pies">Pies</option>
                        <option value="Kot">Kot</option>
                        <option value="Gryzoń">Gryzoń</option>
                        <option value="Gad">Gad</option>
                        <option value="Ptak">Ptak</option>
                    </select>
                    <select
                        className="select-input"
                        name=""
                        id=""
                        defaultValue={sex}
                        onChange={(e) => setSex(e.target.value)}
                    >
                        <option value="sex">Wybierz płeć</option>
                        <option value="Samiec">Samiec</option>
                        <option value="Samica">Samica</option>

                    </select>
                    <input
                        className="default-input"
                        type="text"
                        placeholder="Wiek"
                        defaultValue={age}
                        onChange={(e) => setAge(e.target.value)}
                    />

                    <textarea
                        className="textarea-input"
                        defaultValue={story}
                        cols="30"
                        rows="10"
                        placeholder="Tu wpisz choroby zwierzaka oraz jego historię."
                        onChange={(e) => setStory(e.target.value)}
                    />

                    <input
                        placeholder="Wrzuć link do zdjęcie zwierzaka"
                        className="default-input"
                        name="photo"
                        type="text"
                        defaultValue={photo}
                        onChange={(e) => setPhoto(e.target.value)}
                    />
                    <div>
                        <label className="date-label" htmlFor="">Od:
                            <input
                                type="date"
                                className="date-input"
                                defaultValue={from}
                                onChange={(e) => setFrom(e.target.value)}
                            />
                        </label>
                        <label htmlFor="" className="date-label">Do:
                            <input
                                type="date"
                                className="date-input"
                                defaultValue={to}
                                onChange={(e) => setTo(e.target.value)}
                            />
                        </label>
                    </div>



                    <button className="submit-button-care">Szukaj opieki</button>
                    
                </form>


            </div>
            <div className="adoption-cards-care container">
                <h3 className="care-title">Szukam opieki</h3>
                <ul className="cards-list">
                    {
                        Object.keys(animals).map((id) => {
                            return (
                                <li key={animals[id].id} className="card-item">
                                    <div className="card">
                                        <div className="photo-container">
                                            <img src={animals[id].photo} alt="animal-photo" className="animal-photo"/>
                                        </div>
                                        <div className="animal-info">
                                            <p>
                                                <span>Imię:</span>{animals[id].name}
                                            </p>
                                            <p>
                                                <span>Gatunek:</span>{animals[id].type}
                                            </p>
                                            <p>
                                                <span>Płeć:</span>{animals[id].sex}
                                            </p>
                                            <p>
                                                <span>Wiek:</span>{animals[id].age}
                                            </p>
                                            <p className="date-info">
                                               <span>Od:</span>  {animals[id].from}

                                            </p>
                                            <p className="date-info">
                                                <span>Do:</span>  {animals[id].to}
                                            </p>
                                        </div>
                                        <div className="animal-description">
                                            <p className="description-title">Opis:</p>
                                            <p className="animal-story">{animals[id].story}</p>
                                            <button className="care-btn">Opiekuj się</button>

                                        </div>

                                    </div>

                                </li>
                            )
                        })
                    }
                </ul>
            </div>

        </>

    );
}


export default Care;

And firebase config:

import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
import {getAuth} from "firebase/auth"
import {getDatabase} from "firebase/database";

const firebaseConfig = {
        apiKey: "X",
        authDomain: "X",
        databaseURL: "X",
        projectId: "X",
        storageBucket: "X",
        messagingSenderId: "X",
        appId: "X",
        measurementId: "X"
};

const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
export const db = getDatabase(app);
export const auth = getAuth(app);

Answer 1

Try to import Firebase from compat

& export only db

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

const firebaseConfig = {
  apiKey: "X",
  authDomain: "X",
  projectId: "X",
  storageBucket: "X",
  messagingSenderId: "X",
  appId: "X",
  measurementId: "X"
};
const db = firebase.initializeApp(firebaseConfig);

export default db; 

in other side import db and the app that you want work with

import db from './db';
import { getAuth, signInWithEmailAndPassword } from 'firebase/auth'