CODEWITHSUNDEEP
javascriptreactjsfirebase
Abdallah Abu sedo
Abdallah Abu sedo

Reputation: 115

firebase.database is not a function reactjs

I am new in firebase I am making a simple profile with User information and I want to edit and store the data in the dp in the firebase first I added the CDN this is my index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Level Up Elearning</title>
</head>
<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>

</body>
<script src="/__/firebase/8.5.0/firebase-app.js"></script>
<script src="/__/firebase/8.5.0/firebase-analytics.js"></script>
<script src="/__/firebase/init.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.24.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.24.0/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.1.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.1.0/firebase-database.js"></script>
</body>
</html>

I tried all these scripts and this is my firebase file

import firebase from "firebase/app";
var firebaseConfig = {...};
let fireDb = firebase.initializeApp(firebaseConfig);
export default fireDb.database().ref();

and this is where I call it

import React from "react";
import UserForm from "./UserForm";
import firebaseDb from "../firebase.js";

const UserProfile = () => {
  const AddOrEdit = (obj) => {
    firebaseDb.child("contacts").push(obj, (err) => {
      if (err) {
        console.log(err);
      }
    });
  };
  return (
    <>
      <div class="container py-4">
        <div class="p-5 mb-4 bg-light rounded-3">
          <div class="container-fluid py-5">
            <h1 class="display-10 fw-bold">Profile Page</h1>
          </div>
        </div>

        <div class="row align-items-md-stretch">
          <div class="col-md-6">
            <div class="h-100 p-5 text-white bg-dark rounded-3"></div>
          </div>
          <div class="col-md-6">
            <div class="h-100 p-5 bg-light border rounded-3">
              <UserForm AddOrEdit={AddOrEdit} /> // here I send the function as props to user form
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

export default UserProfile;

this is a pic for the error enter image description here

Upvotes: 0

Views: 112

Answers (1)

Frank van Puffelen
Frank van Puffelen

Reputation: 598668

You're only importing firebase/app, which means the Realtime Database is not available in your code your.

to fix that, add:

import "firebase/database";

This then makes firebase.database() available as a side-effect.

Upvotes: 1

Related Questions