Estoy tratando de referenciar una base de datos en tiempo real en mi aplicación reactjs pero no funciona. Creé un archivo para la configuración de firebase llamado firebase.js y lo importo en ./home/index.js El código de Visual Studio no informa el error , pero cuando miro DevTool informa 3 errores.

1.Error de tipo no detectado: firebase__WEBPACK_IMPORTED_MODULE_1 _.default.app.ref no es una función

2. El error anterior ocurrió en el componente

3. Error de tipo no capturado (en promesa): firebase__WEBPACK_IMPORTED_MODULE_1 _.default.app.ref no es una función

1. firebase.js

 import {initializeApp}from 'firebase/app'; import { getAuth} from 'firebase/auth'; import { getDatabase} from 'firebase/database'; const firebaseAPP =initializeApp( { apiKey: "AIzaSyCtYdRuFmkC3Mx7dcRLBcY-HYPitRuMD2Y", authDomain: "reactproject-2d567.firebaseapp.com", databaseURL:"https://reactproject-2d567-default-rtdb.firebaseio.com/", projectId: "reactproject-2d567", storageBucket: "reactproject-2d567.appspot.com", messagingSenderId: "199332161332", appId: "1:199332161332:web:828be709a4d0109df62761", measurementId: "G-F517JH6WEJ" }); const auth = getAuth(firebaseAPP) const db = getDatabase(firebaseAPP) class Firebase{ constructor(){ this.app = getDatabase(firebaseAPP); } //metodo de login login(email,password){ return auth.signInWithEmailAndPassword(email,password) } async register(nome,email,password){ await auth.createUserWithEmailAndPassword(email,password) const uid= auth.currentUser.uid return db.ref('usuario').child(uid).set({nome:nome}) } isInitialized(){ return new Promise(resolve =>{ auth.onAuthStateChanged(resolve) }) } } export default new Firebase();

2. ./home/index.js

 import React, { Component } from 'react'; import firebase from '../../firebase'; import './home.css' class Home extends Component { state ={ posts:[] } componentDidMount(){ firebase.app.ref('posts').once('value', (snapshot)=>{ let state = this.state; state.posts =[] snapshot.forEach((childItem)=>{ state.posts.push({ key:childItem.key, titulo:childItem.val().titulo, image:childItem.val().image, descricao:childItem.val().descricao, autor:childItem.val().autor, }) }) this.setState({state}) }) } render(){ return( <div> home</div> ) } } export default Home