0

I am trying to connect my web app to firebase and i'm following the instructions as per the official documentation, it seems the connection is established as I do not see any errors in the console, but i'm unable to write data to the database

HTML:

      <script src="https://www.gstatic.com/firebasejs/7.5.2/firebase-app.js"></script>

      <script src="main.js"></script>

JS:

submitBtn.onclick = function () {
var firebaseConfig = {
    apiKey: "-------------",
    authDomain: "--------------",
    databaseURL: "------------",
    projectId: "----------",
    storageBucket: "--------",
    messagingSenderId: "---------------",
    appId: "---------------"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
console.log(firebaseConfig);

var database = firebase.database();
var ref = database.ref("myTickets");
var data = {
    name: "First User",
    score: 43
}

ref.push(data)
}

For the time being I hard coded the data that I want to add and upon the button click it should update the data in the database but at times I am getting "main.js:33 Uncaught TypeError: firebase.database is not a function"

I tried changing the gstatic link to firebase.js but still getting the same error.

What am I doing wrong here?

ankitjt
  • 477
  • 1
  • 5
  • 15

3 Answers3

1

Add the firebase database script also to be able to use database():

<script src="https://www.gstatic.com/firebasejs/7.5.2/firebase-database.js"></script>

You can find the full list of firebase products to add here:

https://firebase.google.com/docs/web/setup#libraries-cdn

Peter Haddad
  • 78,874
  • 25
  • 140
  • 134
  • hi, I did that but I get the following error now errors .ts:101 Uncaught FirebaseError: Firebase: Firebase App named '[DEFAULT]' already exists (app/duplicate-app). I do not have any duplicate app – ankitjt Dec 12 '19 at 07:31
  • you are initialising twice `firebase.initializeApp(firebaseConfig);` – Peter Haddad Dec 12 '19 at 07:35
1

As you see in the doc, there are two ways to add Firebase SDKs:

1. Include the entire Firebase JavaScript SDK

This not recommended for production apps

  <body>
    <!-- Insert this script at the bottom of the HTML, but before you use any Firebase services -->

    <!-- Add the entire Firebase JavaScript SDK -->
    <script src="https://www.gstatic.com/firebasejs/7.5.2/firebase.js"></script>
  </body>

2. Include only specific Firebase products

<body>
  <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->

  <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
  <script src="https://www.gstatic.com/firebasejs/7.5.2/firebase-app.js"></script>

  <!-- Add Firebase products that you want to use -->
  <script src="https://www.gstatic.com/firebasejs/7.5.2/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.5.2/firebase-database.js"></script>
</body>
Renaud Tarnec
  • 79,263
  • 10
  • 95
  • 121
  • I am getting this error: WebSocketConnection.ts:366 WebSocket connection to 'wss://s-usc1c-nss-249.firebaseio.com/.ws?v=5&s=uINs4cd9gP7ctZeaReP6SUlD27ppimNb&ns=system1-a64ba' failed: **WebSocket is closed before the connection is established.** – ankitjt Dec 12 '19 at 07:38
  • See https://stackoverflow.com/questions/12421993/firebase-websocket-is-closed-before-the-connection-is-established. – Renaud Tarnec Dec 12 '19 at 07:39
0

Refer this link which contains a discussion related to same issue. Looks like you have missed adding some firebase libraries(I havent tested your code though)

Also you should not post your API key in stackoverflow or any public website. People can misuse your API keys. You should change them immediately.

Shiva
  • 543
  • 1
  • 6
  • 20