'Uncaught ReferenceError: Firebase is not defined

I am trying to follow the tutorial on designing a database in firebase, but I am getting the following error in the JavaScript console:

Uncaught ReferenceError: Firebase is not defined

Here is the link to the tutorial, and the code snippet that I was trying to run in the JavaScript console is: https://www.firebase.com/blog/2014-11-04-firebase-realtime-queries.html

var ref = new Firebase("https://dinosaur-facts.firebaseio.com/dinosaurs");
ref.orderByChild("height").on("child_added", function(snapshot) {
  console.log(snapshot.key() + " was " + snapshot.val().height + " meters tall");
});

Solution 1:^[1]

In the heading, include the following:

<head>
    <script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
  </head>

That'll solve the problem.

Solution 2:^[2]

There is a guide on how to migrate to the new version.
You can find it at: https://firebase.google.com/support/guides/firebase-web

And here is the relevant snippet for you

Solution 3:^[3]

if you are using firebase web api then its very important to include core firebase SDK first in the body tag, this SDK provide firebase accessibility. as shown in image .

,After that we have to include all related api code . which is availible

theses will helpful for you ,and it will surly solve your problem ,which is firebase is not defined ,you don't need to add any other script's

Solution 4:^[4]

If you are using Firebase Hosting like I was (and using <script src="/__/firebase/7.14.5/firebase-app.js"></script>), then you will run into this error if you try to test locally without running firebase serve.

Solution 5:^[5]

i have the issue with firebase.util lib, as Rodrigo said i think is problem of the versión.

Before:

    var ref = new Firebase('url');

Now:

    firebase.initializeApp(config);

As the firebase object is defined differently it does not find it. In my case, I need to update the library to be compatible with version 3.0 of firebase. I do not think it's a good idea to use the old library, to get out of step is fine but will have to update the codes to version 3. If no one has done yet may be our opportunity to contribute to the community.

Solution 6:^[6]

<head>
    <script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
    <link rel='stylesheet' type='text/css' href='/resources/tutorial/css/example.css'>
  </head>

Solution 7:^[7]

I had the same issue when installed firebase via "ionic add firebase". This added firebase version 3.2.0. Then, while looking for answers I tried the cdn with version 2.4.2 and the error disappeared, so I figured out the version downloaded via ionic was what caused the error, so I downloaded the 2.4.2 version and now it works.

Hope this helps.

Solution 8:^[8]

If anyone's having this problem in Jul. 2021, here's my solution:

1.) USE THE CLI!!! It's so much easier!!! (just do npm install -g firebase-tools

2.) CD to your preferred directory and do firebase login

3.) Login Into your firebase acc.

4.) Do firebase init and go through all of the steps

5.) create an app.js file inside your public/ folder

6.) Add this code:

document.addEventListener('DOMContentLoaded', event => {
        const app = firebase.app();
});

And you should be all good now, just make sure to write any code interacting with FireBase inside the EventListener

Your Project should look something like this:

Solution 9:^[9]

create the connection variable from the firebase.

con = {
    "apiKey": "your key",
    "authDomain": "example.firebaseapp.com",
    "databaseURL": "https://example.firebaseio.com/",
    "projectId": "example",
    "storageBucket": "example.appspot.com",
    "messagingSenderId": "id"
};

initialize the firebase using this

firebase.initializeApp(con);

Solution 10:^[10]

I was also facing the same issue. The issue was with my api.js file.

const api = liveAPi;

var firebaseConfig = {
  apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  authDomain: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  projectId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  storageBucket: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  appId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  measurementId: "xxxxxxxxxxxxx"
};
  // Initialize Firebase
firebase.initializeApp(firebaseConfig);

It clearly shows it was not accessing the firebase object. Firebase suggest to add js file through <script src="https://www.gstatic.com/firebasejs/8.7.0/firebase-app.js"> ,

<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.7.0/firebase-app.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/8.7.0/firebase-analytics.js"></script>

<script>
  // Your web app's Firebase configuration
  // For Firebase JS SDK v7.20.0 and later, measurementId is optional
  var firebaseConfig = {
    apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
      authDomain: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
      projectId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
      storageBucket: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
      messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
      appId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
      measurementId: "xxxxxxxxxxxxx"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();
</script>

But I was accessing the firebase objects in the js file.

So to resolve this: Add those to firebase object just before including the api.js file in HTML, like this:-

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

<script src="../js/fetch/api.js"></script>

This will enable api.js to access the firebase object.

There are some other methods related to accessing those firebase objects in javascript files also, but the default setup provided by firebase through the global object is safe.

And, The method of writing all the Javascript code in APP.js and accessing firebase objects and methods is also a good choice but very painful for larger projects. Since you need to refactor your code and bundle/include it to one file App.js.

Solution 11:^[11]

Answer is to add this to your head tag in the html file I think this should solve the problem Add Firebase SDK:https://firebase.google.com/docs/database/web/start?authuser=0

if not solved then go to this site: https://firebase.google.com/docs/database/web/read-and-write?authuser=0

<head>
    <script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
    <link rel='stylesheet' type='text/css' href='/resources/tutorial/css/example.css'>
  </head>

Happy To Help?

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Community
Solution 2	guy mograbi
Solution 3	HK boy
Solution 4	brownmagik352
Solution 5	Alberto Hernández
Solution 6	j22purikas
Solution 7	Rodrigo
Solution 8	Brady
Solution 9	sangram desai
Solution 10	KailashJS
Solution 11

'Uncaught ReferenceError: Firebase is not defined

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]

Solution 10:[10]

Solution 11:[11]