Firebase uncaught referenceError: firebase not defined

Question

I am having trouble connecting my firebase db in an OnsenUI/monaca app. I have looked through other threads pertaining to this issue, and I have made sure my call is updated for firebase 3.x.x. However, each time I try to launch the app in development, I get the same firebase not defined error. I am new to all this, and any help would be much appreciated

index.html

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
  <script src="https://cdn.firebase.com/js/client/2.4.2/firebase.js"></script>
  <script>
  //creates reference to firebase
  var ref = new Firebase('https://monaca-cli-trial.firebaseio.com/');

  // Initialize Firebase
  var config = {
    apiKey: "whateverapinumber",
    authDomain: "myapp.firebaseapp.com",
    databaseURL: "https://myapp.firebaseio.com",
    storageBucket: "",
  };
  firebase.initializeApp(config);

  var rootRef = firebase.database().ref();

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

  <script src="components/loader.js"></script>
  <script src="lib/onsenui/js/onsenui.min.js"></script>
  <script src="lib/javascriptstuff.js"></script>
  <link rel="stylesheet" href="components/loader.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
  <link rel="stylesheet" href="css/style.css">

The error I get points to line 19, which is the firebase.initializeApp(config);

Answer 1

I posted in detail in the code where you have errors. Additionally, I recommend to watch the video on the channel firebase. https://youtu.be/k1D0_wFlXgo

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
  
  <!-- 1. Duplicates. Outdated version-->
  <!--<script src="https://cdn.firebase.com/js/client/2.4.2/firebase.js"></script>-->


  <!-- 2. Install the new version-->
  <script src="https://www.gstatic.com/firebasejs/3.3.0/firebase.js"></script>
  
  <script>  
  //  3. Remove it is not necessary.  Are registered in the databaseURL .
  //   var ref = new Firebase('https://monaca-cli-trial.firebaseio.com/');

 
  var config = {
   /* 5. Install apiKey*/ apiKey: "whateverapinumber",
    /* 6 Replace authDomain: "myapp.firebaseapp.com" on authDomain: "monaca-cli-trial.firebaseapp.com" */ authDomain: "monaca-cli-trial.firebaseapp.com",
    /* 7 Replace databaseURL: "https://myapp.firebaseio.com" on databaseURL: "https://monaca-cli-trial.firebaseio.com/" */ databaseURL: "https://monaca-cli-trial.firebaseio.com/", 
    storageBucket: "",
  };
  firebase.initializeApp(config);

  var rootRef = firebase.database().ref();

  </script>

  <script src="components/loader.js"></script>
  <script src="lib/onsenui/js/onsenui.min.js"></script>
  <script src="lib/javascriptstuff.js"></script>
  <link rel="stylesheet" href="components/loader.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
  <link rel="stylesheet" href="css/style.css">

Answer 2

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <!-- <link rel="stylesheet" href=""> -->
    </head>
    <body>
        <label for="">Username</label><input type="text" name="username" id="username" value="" placeholder="">
        <label for="">First Name</label><input type="text" name="firstname" id="firstname" value="" placeholder="">
        <label for="">last Name</label><input type="text" name="lastname" id="lastname" value="" placeholder="">
        <button id="save">save</button>
        <button id="clear">clear</button>
        <button id="load">load</button>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://www.gstatic.com/firebasejs/3.7.2/firebase.js"></script>
    <script>
      // Initialize Firebase
      // var config = {
      //   apiKey: "AIzaSyAq0r--LaHvc6udVUcZqe6V-j-oYI_8ZLs",
      //   authDomain: "firstfirebase-eac5d.firebaseapp.com",
      //   databaseURL: "https://firstfirebase-eac5d.firebaseio.com",
      //   projectId: "firstfirebase-eac5d",
      //   storageBucket: "firstfirebase-eac5d.appspot.com",
      //   messagingSenderId: "820643601987"
      // };
      // firebase.initializeApp(config);


    // service cloud.firestore {
    //   match /databases/{database}/documents {
    //     match /{document==**} {
    //       allow read, write: if false;
    //     }
    //   }
    // }


      // Initialize Firebase
      var config = {
        apiKey: "AIzaSyAgYi4y5oqmD1_lStsLPku3ijtgeivuL0o",
        authDomain: "userfirebase-dc252.firebaseapp.com",
        databaseURL: "https://userfirebase-dc252.firebaseio.com",
        projectId: "userfirebase-dc252",
        storageBucket: "userfirebase-dc252.appspot.com",
        messagingSenderId: "284706019886"
      };
      firebase.initializeApp(config);

     var rootRef = firebase.database().ref();



    $('#save').click(function(){
        rootRef.set({
            username:  $('#username').val(),
            firstname: $('#firstname').val(),
            lastname:  $('#lastname').val()
        });
    });


    </script>

    </body>

   <iframe src="http://site.startupbug.net:6999/canvas/firebase/" style="width:100%;height:500px;"></iframe>
    </html>