Uncaught ReferenceError: Firebase is not defined

Question

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");
});

This means that you didn't include the Firebase JavaScript library in your page yet. Instead of starting from a blog post, I recommend that you start with this [5-minute interactive tutorial](https://www.firebase.com/tutorial/). It explains what to add in the first step. — Frank van Puffelen, Jan 23 '16 at 20:20
Thank you very much, I added the following line as per your suggestion: src='https://cdn.firebase.com/js/client/2.2.1/firebase.js' But I am still getting the same error. Also, what should I expect if the code is executed successfully? — Eddev, Jan 23 '16 at 20:37
Follow the tutorial I linked and you'll have a tiny chat application. If you are having trouble in your local setup, show the exact, complete, but minimal code that you use *in your question* (there an "edit" link right under it). The code you have now is correct, just not complete. — Frank van Puffelen, Jan 23 '16 at 22:56
Thanks, Frank! I am able to run my code and read data from the database successfully. — Eddev, Jan 29 '16 at 22:44
amazing is that they somehow manage to HIDE this information and no where in the docs(the normal docs you find in google) you can learn you need to add those 4 scripts. Years and years people handle the same problem and nowhere in their multiple guides they are telling you to add those. This is beyond me to understand. Sometimes, it seems they just try to make it harder because it seems smart. — gotiredofcoding, Feb 07 '23 at 16:18

score 24 · Answer 1 · answered Aug 06 '16 at 05:02

24

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

answered Aug 06 '16 at 05:02

guy mograbi

27,391
16
83
122

7

when I add this code I get "ReferenceError: firebase is not defined". Where are you getting the "firebase" variable from? – Jim Oct 06 '16 at 03:39
@Jim did you add the `firebase.js` to your `html` file? – guy mograbi Oct 06 '16 at 14:28
1

I tried adding firebase.js via the script tag, bower install ,and npm install. I always get the firebase is not defined error. :( Check this issue: https://github.com/firebase/angularfire/issues/362 – Jim Oct 07 '16 at 01:01
1

@Jim you can follow my code at: https://github.com/GuyMograbi/mograblog/blob/master/src/scripts/mograblog-counter.js - I use version 3.2.1. You have to use the right version as their API changes. – guy mograbi Oct 07 '16 at 04:29

score 23 · Accepted Answer · edited Apr 26 '22 at 09:07

23

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.

edited Apr 26 '22 at 09:07

Community

1
1

answered Jan 29 '16 at 22:46

Eddev

890
1
10
21

3

This is the new script `` – Suhaib Sep 04 '17 at 18:25
where is this in their docs? – gotiredofcoding Feb 07 '23 at 16:19

score 4 · Answer 3 · edited Sep 26 '20 at 04:27

4

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

edited Sep 26 '20 at 04:27

HK boy

1,398
11
17
25

answered Sep 25 '20 at 10:18

Arti Trivedi

41
2

score 3 · Answer 4 · answered May 26 '20 at 00:17

3

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.

answered May 26 '20 at 00:17

brownmagik352

398
3
12

score 2 · Answer 5 · answered Jan 15 '17 at 20:26

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.

score 2 · Answer 6 · answered Sep 15 '17 at 11:52

<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>

score 1 · Answer 7 · answered Jul 26 '16 at 03:39

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.

score 1 · Answer 8 · answered Jun 25 '21 at 23:47

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:

score 1 · Answer 9 · edited May 01 '23 at 17:28

If you're using version 9 of firebase, follow these steps to resolve that issue. Include this script in your HTML file.

<script type="module">
  // Import the functions you need from the SDKs you need
  import { initializeApp } from "https://www.gstatic.com/firebasejs/9.21.0/firebase-app.js";
  import { getFirestore } from "https://www.gstatic.com/firebasejs/9.21.0/firebase-firestore.js";
  // TODO: Add SDKs for Firebase products that you want to use
  // https://firebase.google.com/docs/web/setup#available-libraries
      
  // Your web app's Firebase configuration
  const firebaseConfig = {
    apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    authDomain: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    projectId: "xxxxxxxxxxxxxxxxxxxx",
    storageBucket: "xxxxxxxxxxxxxxxxx",
    messagingSenderId: "xxxxxxxxxxxx",
    appId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
  };
      
  // Initialize Firebase
  const app = initializeApp(firebaseConfig);
</script>

The above two imports are important for using firestore.

score 0 · Answer 10 · answered Jan 30 '20 at 10:25

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);

score 0 · Answer 11 · answered Jul 07 '21 at 01:43

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.

Ritvik-Buxi · Answer 12 · 2021-09-26T16:27:11.180

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

Uncaught ReferenceError: Firebase is not defined

12 Answers12

Linked