Question 180933 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Uncaught ReferenceError: firebase is not defined error on firebase.initializeApp(Config)

i am trying to connect and fetch data from my firebase firestore database but I am having error on firebase.initializeApp(firebaseConfig);
error is Uncaught ReferenceError: firebase is not defined I tried may ways that were told on different websites ut nothing worked kindly help my code is

 <script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>
    <script src="https://www.gstatic.com/firebasejs/9.22.1/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.22.1/firebase-firestore.js"></script>
    <script src="https://www.gstatic.com/firebasejs/9.22.1/firebase-auth.js"></script>

    <script src="https://code.jquery.com/jquery-3.7.0.js" ></script>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>  
// Firebase configuration
var firebaseConfig = {
  apiKey: "{{ config('services.firebase.apiKey') }}",
  authDomain: "{{ config('services.firebase.authDomain') }}",
  projectId: "{{ config('services.firebase.projectId') }}",
  storageBucket: "{{ config('services.firebase.storageBucket') }}",
  messagingSenderId: "{{ config('services.firebase.messagingSenderId') }}",
  appId: "{{ config('services.firebase.appId') }}",
  measurementId: "{{ config('services.firebase.measurementId') }}"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);        //getting error on this line

many answers i saw to reso;ve this issue were about include scripts that are already included i tried to include them in head too but not working i am working on local server

Tags:

2

Answers


  1. 0

    You use JS modules scripts, but you need to include compatibility libraries as mentioned here https://firebase.google.com/docs/web/modular-upgrade#window-compat

    rename files

    firebase.js -> firebase-compat.js
firebase-app.js -> firebase-app-compat.js
firebase-firestore.js -> firebase-firestore-compat.js
firebase-auth.js -> firebase-auth-compat.js
    Login or Signup to reply.
  2. 0

    Firebase’s JavaScript SDKs support two syntaxes:

    • The namespaced API that we initially introduced, which has a limited set of top-level service objects with nested method calls inside them.
    • The modular API that we introduces in SDK version 9, which relies on many more top-level functions. This API has the advantage that unused functionality can be removed during the build process by a so-called bundler tool, which means that you end up with much smaller apps.

    The code in your question uses a mix of these two syntaxes, which unfortunately isn’t possible. The good news is that you have two options to move forward:

    1. Either use the new modular SDK from a CDN, as shown in the alternate setup section of the documentation.
    2. Or use the compatibility libraries that are built-into the newer SDK, so that you can continue to use the namespaced syntax. That path is documented in Using the compat library from the window.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search