CODEWITHSUNDEEP
javascriptfirebasefirebase-realtime-database
Eddev
Eddev

Reputation: 900

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

Upvotes: 35

Views: 178943

Answers (12)

Ashwin Kumar
Ashwin Kumar

Reputation: 11

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.

Upvotes: 1

Eddev
Eddev

Reputation: 900

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.

Upvotes: 23

Ritvik-Buxi
Ritvik-Buxi

Reputation: 1

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😉

Upvotes: 0

KailashJS
KailashJS

Reputation: 11

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.

Upvotes: 0

Brady
Brady

Reputation: 1039

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:

Image of Directory in VSCode

Upvotes: 1

Arti Trivedi
Arti Trivedi

Reputation: 41

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

1 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

2

Upvotes: 4

brownmagik352
brownmagik352

Reputation: 396

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.

Upvotes: 3

sangram desai
sangram desai

Reputation: 31

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

Upvotes: 0

j22purikas
j22purikas

Reputation: 75

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

Upvotes: 2

Alberto Hern&#225;ndez
Alberto Hern&#225;ndez

Reputation: 21

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.

Upvotes: 2

guy mograbi
guy mograbi

Reputation: 28598

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

enter image description here

Upvotes: 24

Rodrigo
Rodrigo

Reputation: 31

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.

Upvotes: 1

Related Questions