CODEWITHSUNDEEP
javascriptfirebase-realtime-database
Hasyim Tanuwijaya
Hasyim Tanuwijaya

Reputation: 11

it show Uncaught ReferenceError: initializeApp is not defined

I want to show 'blogs' from my database in my web page. I already include the packages firebase-app and firebase-database, but still it does not recognize initializeApp.

It show:

Uncaught ReferenceError: initializeApp is not defined

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2> hello world </h2>

    <!-- the functions you need from the SDKs you need-->

        <!-- Import the functions you need from the SsDKs you need-->
        <script src="https://www.gstatic.com/firebasejs/7.7.0/firebase-app.js"></script>
        <script src="https://www.gstatic.com/firebasejs/7.7.0/firebase-database.js"></script>


    <script>
        // Your web app's Firebase configuration
  // For Firebase JS SDK v7.20.0 and later, measurementId is optional
  const firebaseConfig = {
    apiKey: "AIzaSyDwq-CA3Fm1oYj3jLnPeeczNb9xXrKYtbo",
    authDomain: "firebasic-a87d7.firebaseapp.com",
    databaseURL: "https://firebasic-a87d7-default-rtdb.asia-southeast1.firebasedatabase.app",
    projectId: "firebasic-a87d7",
    storageBucket: "firebasic-a87d7.appspot.com",
    messagingSenderId: "701224819501",
    appId: "1:701224819501:web:69eedfd3468db6f3f511a4",
    measurementId: "G-WVEYYLK2VJ"
  };

  // Initialize Firebase
  const app = initializeApp(firebaseConfig);
  const db = firebase.database();
  const blogRef = db.ref(blogs).on('value',handleSuccess,handleError);

  function handleSuccess(items){
      console.log(items);
}

  function handleError(error){
      console.log(error);
}

 
        </script>
</body>
</html>

Upvotes: 1

Views: 1215

Answers (2)

Martin Zeitler
Martin Zeitler

Reputation: 76669

initializeApp / firebase.initializeApp are available when firebase-app.js had been loaded.

Rather use v9, which still can be setup through CDN:

<body>

  <!-- Insert this script at the bottom of the HTML, but before you use any Firebase services -->
  <script type="module">
    import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.1.2/firebase-app.js'
    import { auth } from 'https://www.gstatic.com/firebasejs/9.1.2/firebase-auth.js'
    import { database } from 'https://www.gstatic.com/firebasejs/9.1.2/firebase-database.js'
  </script>
</body>

Or v8 with deferred loading:

<script defer src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
<script defer src="https://www.gstatic.com/firebasejs/8.10.0/firebase-auth.js"></script>
<script defer src="https://www.gstatic.com/firebasejs/8.10.0/firebase-database.js"></script>   
<script defer src="./init-firebase.js"></script>

File init-firebase.js:

var firebaseConfig = { ... };
firebase.initializeApp( firebaseConfig );

Upvotes: 1

Obaida Alhassan
Obaida Alhassan

Reputation: 601

Firebase will add a global object in your window, firebase that hold the initializeApp method, so you have to access it through the firebase object but you cannot call initializeApp directly

BTW, your config has an invalid `firebase/database URL

please consider watching this video to have an intro about FB DB Get started with Firebase on web

Make sure to change your app and DB credentials on Firebase, cause they're public now everyone saw them

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h2> hello world </h2>

    <!-- the functions you need from the SDKs you need-->

    <!-- Import the functions you need from the SsDKs you need-->
    <script src="https://www.gstatic.com/firebasejs/7.7.0/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.7.0/firebase-database.js"></script>


    <script defer async>
        console.log(firebase);
        // Your web app's Firebase configuration
        // For Firebase JS SDK v7.20.0 and later, measurementId is optional
        const firebaseConfig = {
            apiKey: "AIzaSyDwq-CA3Fm1oYj3jLnPeeczNb9xXrKYtbo",
            authDomain: "firebasic-a87d7.firebaseapp.com",
            databaseURL: "https://firebasic-a87d7-default-rtdb.asia-southeast1.firebasedatabase.app",
            projectId: "firebasic-a87d7",
            storageBucket: "firebasic-a87d7.appspot.com",
            messagingSenderId: "701224819501",
            appId: "1:701224819501:web:69eedfd3468db6f3f511a4",
            measurementId: "G-WVEYYLK2VJ"
        };

        // Initialize Firebase
        const app = firebase.initializeApp(firebaseConfig);
        const db = firebase.database();
        const blogRef = db.ref(blogs).on('value', handleSuccess, handleError);

        function handleSuccess(items) {
            console.log(items);
        }

        function handleError(error) {
            console.log(error);
        }

    </script>
</body>

</html>

Upvotes: 0

Related Questions