2

Im trying to make a database call/post but im getting the error

functions.js:7 Uncaught ReferenceError: firebase is not defined

From my research it is my understanding that 'firebase' is defined in the firebase.js script file that is imported using the CDN code from the setting panel in Firebase.. But all the help pages i find are from 2014-2017 and version 9 of Firebase uses a completely different import language.. These pages are no help to me..

I am using the standard

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.1.3/firebase-app.js";

Am I right in thinking that because this import is happening (and its seemingly is - firebase-app.js is showing up in the inspector) That firebase should be defined...

Or is firebase defined somewhere else and im missing something?? If this is the case where is firebase defined and how do i import it (with V9 Firebase)

Thanks

Edit: Im doing this all through a tutorial I found on Youtube, its from 2019.. Is it possible that calling upon 'firebase' now is outmoded and that is what I am having these troubles? Or should i expect it to work and keep trying to find a solution?

Frank van Puffelen
  • 565,676
  • 79
  • 828
  • 807
Wan33
  • 163
  • 1
  • 12

5 Answers5

2

In v8 and older versions of the Firebase Web SDK, now referred to as the "namespaced SDK", the SDK would add methods and types to a global object called firebase. You will see a lot of existing tutorials with code that looks like firebase.initializeApp(), firebase.database() and firebase.firestore.FieldValue.increment(). All of these calls will not work in the newer versions of the Firebase Web SDK.

In v9 and later versions of the Firebase Web SDK, now referred to as the "modular SDK", the SDK undertook a major architectural revamp and introduced lots of breaking changes. The primary change with the new version is that the firebase global object was completely removed and every method and type is now exported independently. When using this new SDK with a build tool like Webpack or Rollup, it can "shake the tree" to loosen and remove all of the bits of code that you don't actually use in your code from the final build.

As an example, if you don't use any of the FieldValue transforms in your code (like increment(), serverTimestamp() and arrayUnion()) they won't be included in your final build saving you and your users resources and time.

samthecodingman
  • 23,122
  • 4
  • 30
  • 54
  • Now that the top-level namespace has been removed I place a variable such as ```const addPost = httpsCallable(functions, 'addPost');``` and I get a CORS error in my console. Is there a way to fix this? – HarryNC Aug 31 '22 at 08:34
  • @HarryNC The CORS error could be caused by a multitude of different reasons. Take a look at [this search](https://stackoverflow.com/search?q=httpsCallable+CORS) and if none of those answer your question, create a new question specifying why those answers don't solve your problem. – samthecodingman Aug 31 '22 at 09:06
  • thanks but this search doesn't give any relevant information for my example as I'm using the firebase emulator and modular 9. My question (https://stackoverflow.com/questions/73553276/firebase-callable-cloud-function-cors-error-using-firebase-emulator-and-vite). – HarryNC Aug 31 '22 at 10:00
1

Not sure how you are using the script files, but have u defined them as "modules" in you html like:

and have you initialized firebase from your app:

const firebaseConfig = { YOU_FIREBASE_CONFIG } const app = initializeApp(firebaseConfig)

omar al-hamad
  • 27
  • 2
  • Yes, they are within the – Wan33 Oct 16 '21 at 10:02
1

The difference between v8 and v9 of firebase is a well-known error these days.

I am not sure this could be the exact solution, but at least as a hint.

Using compat is a way to solve.

Based in the firebase document below.

import firebase from 'firebase/compat/app';

↑would be how to import.....

Upgrade from version 8 to the modular Web SDK

K Lee
  • 473
  • 3
  • 16
  • 1
    While using the compatibility library would solve the problem, the compatibility library should be treated as if it is deprecated - i.e. don't use it for new code. It's provided to help folks migrate their legacy code to the new format rather than just outright breaking everything. – samthecodingman Oct 16 '21 at 14:44
1

When you run this code:

import { initializeApp } from ...

This code imports only the initializeApp function, and nothing else. That's precisely its point, because by using these very granular imports, bundler tools (like webpack) are able to drop any part of the Firebase SDK that you are not using from their output, resulting in a significantly smaller app.

So when you run that import, there is no top-level firebase namespace anymore. To access the Realtime Database, you'd instead use:

import { initializeApp } from 'firebase/app';
import { getDatabase } from "firebase/database";

// Set the configuration for your app
// TODO: Replace with your project's config object
const firebaseConfig = {
  apiKey: "apiKey",
  authDomain: "projectId.firebaseapp.com",
  databaseURL: "https://databaseName.firebaseio.com",
  storageBucket: "bucket.appspot.com"
};

const app = initializeApp(firebaseConfig);

// Get a reference to the database service
const database = getDatabase(app); //  Get the database instance

This is shown in the documentation on initializing the Realtime Database JavaScript SDK, so I recommend keeping that handy.

If you're following a tutorial or documentation from elsewhere, it likely hasn't been updated to the new modular syntax yet. You can also use the compat mode of the new SDK in that case, as user K Lee pointed out in their answer.

Frank van Puffelen
  • 565,676
  • 79
  • 828
  • 807
0

After a while I realized that all your Javascript code has to be run within the SDK module tags that you import from the Firebase Dashboard...

If your Javascript is not run within the <script type="module"> tags from the imported Firebase code the imported modules from Firebase's modular SDK wont be defined.

Also I was trying to go through a tutorial that was from V5 of Firebase and was running into problems there as well.

Wan33
  • 163
  • 1
  • 12