Firebase Realtime Database "Firebase: Need to provide options, when not being deployed to hosting via source."

Question

I am using firebase realtime database., and my web app shows a white screen. The browser console shows this error:

Firebase: Need to provide options, when not being deployed to hosting via source. (app/no-options)

App.js:

import React, { useState, useEffect } from 'react';
import Card from './components/Card/card';
import './App.css';
import { getDatabase } from "firebase/database";

function App() {

  const [data, setData] = useState([]);

  useEffect(() => {
    const db = getDatabase();
    const ref = db.ref('main');
    ref.on('value', snapshot => {
        setData(snapshot.val());
    });
  }, []);
  return (
    <>
      <nav>
        <ul className="horizontal-menu">
          <li className="horizontal-menu-item"><a href="#home">Home</a></li>
          <li className="horizontal-menu-item"><a href="#about">About</a></li>
          <li className="horizontal-menu-item"><a href="#services">Services</a></li>
          <li className="horizontal-menu-item"><a href="#contact">Contact</a></li>
        </ul>
      </nav>
      <div>
      {data.map(item => (
        <Card
          title={item.Title}
          image={item.Image_URL}
          discription={item.discription}
        />
      ))}
      </div>
    </>
  );
}

export default App;

firebase config file:

import { initializeApp } from "firebase/app";
import { getDatabase } from "firebase/database";

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

const app = initializeApp(firebaseConfig);
const database = getDatabase(app);

I changed the config file and import them several times but nothing changed, I wanted to see a card with the info that is in the database

Answer 1

You have getDatabase() in your App.js but Firebase is not initialized before that. To ensure Firebase is initialized, it's best to a single instance that you create in firebase.js file. Try:

// App.js

import { database } from "../path/to/firebase"; // <-- replace with correct path
import { ref } from "firebase/database"

// don't use `getDatabase()` here
useEffect(() => {
  const ref = ref(db, 'main'); // db imported from Firebase config file 

  onValue(ref, (snapshot) => {
    setData(snapshot.val())
  });
}, []);