# Firebase 10.1.0 and p5

**URL:** <https://discourse.processing.org/t/firebase-10-1-0-and-p5/42514>\
**Category:** Libraries\
**Created:** [July 28, 2023, 4:41am UTC](https://discourse.processing.org/t/firebase-10-1-0-and-p5/42514 "2023-07-28T04:41:48Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![lizzy](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lizzy/32/2064_2.png) [@lizzy](https://discourse.processing.org/u/lizzy)\
**Post date:** [July 28, 2023, 4:41am UTC](https://discourse.processing.org/t/firebase-10-1-0-and-p5/42514/1 "2023-07-28T04:41:48Z")

</div>

Hello forum,

In the past I have been successful integrating a p5 sketch with a firebase realtime database. When I went to start a new project, it’s not working the way that it used to and I am stuck.

With firebase version 8, I linked to the firebase library almost the same way I link to the p5 library, with a script tag in index.html:

```auto
 <script src="https://cdn.jsdelivr.net/npm/firebase@8.10.0/firebase.js"></script> 

```

This doesn’t work in the latest version of firebase.

The firebase installation instruction tells me to add the script as a type = “module” and then to add these lines of code into my index.js file:

```auto
import { initializeApp } from 'https://www.gstatic.com/firebasejs/10.1.0/firebase-app.js';
import { getDatabase } from "https://www.gstatic.com/firebasejs/10.1.0/firebase-database.js";

```

my sketch.js file doesn’t run properly if I call it as type=module, and I can’t get my p5 code to work in index.js. If I run both index.js and sketch.js from index.html, sketch.js is not able to access the database variables defined in index.js (even though I believe they are global).

Here is the link to the full project : [p5.js Web Editor](https://editor.p5js.org/lizzybrooks/sketches/40UF6pAYU)  
I’m adding the p5 editor link because it’s easy to see, but I’ve mainly been working on it in VScode with a local server, so I know that the error isn’t caused by an issue within the editor.

Thank you for your help!!

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [July 28, 2023, 8:03am UTC](https://discourse.processing.org/t/firebase-10-1-0-and-p5/42514/2 "2023-07-28T08:03:00Z")

</div>

> [@SimplexNoise is not defined](https://discourse.processing.org/t/simplexnoise-is-not-defined/33163/5):
>
> No worries, you didn’t. After a closer look I’ve spotted the library fails at the very start: Object.defineProperty(exports, "\_\_esModule", { value: true }); There’s no existing exports in the browser’s JS environment. But rather exports exists for code running in the Node.js server-side environment. That is, the library Simplex-Noise is primarily meant for server-side apps, not client-side browsers. However not all is lost: Besides the CommonJS (cjs) version: [cdn.JsDelivr.net/npm/simplex-…](http://cdn.JsDelivr.net/npm/simplex-noise/dist/cjs/simplex-noise.js)

---

<div class="post-metadata">

**Author:** ![lizzy](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lizzy/32/2064_2.png) [@lizzy](https://discourse.processing.org/u/lizzy)\
**Post date:** [July 28, 2023, 9:32pm UTC](https://discourse.processing.org/t/firebase-10-1-0-and-p5/42514/3 "2023-07-28T21:32:29Z")

</div>

Thank you! This example was super helpful and I was able to connect with firebase.

I continue to struggle with the syntax since the firebase ref() method used to work but doesn’t now. I think that maybe I am missing a step.  
Uncaught TypeError: Cannot read properties of undefined (reading ‘ref’) at \_main.default.Element.submitName

my code with ref:

```auto
 var r = database.ref('name');

```

vs ref method in firebase reference:

```auto
export declare function ref(db: Database, path?: string): DatabaseReference;

```

Here is a link to [my full code in p5 editor](https://editor.p5js.org/lizzybrooks/sketches/40UF6pAYU) and also to the [reference](https://firebase.google.com/docs/reference/js/database.md#ref).

I am grateful for any help in understanding this syntax. Thank you so much!

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [July 28, 2023, 10:37pm UTC](https://discourse.processing.org/t/firebase-10-1-0-and-p5/42514/4 "2023-07-28T22:37:36Z")

</div>

> [@lizzy](#):
>
> `ref(db: Database, path?: string): DatabaseReference`

Warning: I’ve never used Firebase! ⚠

That’s a call signature for function [**ref()**](https://firebase.google.com/docs/reference/js/database.md#ref)'s parameter datatypes and what datatype [**ref()**](https://firebase.google.com/docs/reference/js/database.md#ref) returns.

Its 1st parameter _db_ is of datatype [Database](https://firebase.google.com/docs/reference/js/database.database.md#database_class), not a string!

Most likely you should instead pass your variable _database_, which was initialized w/ the [Database](https://firebase.google.com/docs/reference/js/database.database.md#database_class) object returned by calling function [**getDatabase()**](https://firebase.google.com/docs/reference/js/database.md#getdatabase).

Running your code the error message I get after clicking at button “submit” is this 1:  
Uncaught TypeError: database.ref is not a function

And if I log it I get `undefined`:  
`console.log(database.ref);`

If we scroll up we’ll see function [**ref()**](https://firebase.google.com/docs/reference/js/database.md#ref) belongs to package module “database”:  
[https://Firebase.Google.com/docs/reference/js/database.md#database\_package](https://Firebase.Google.com/docs/reference/js/database.md#database_package)

So you’re gonna need to `import` it alongside function [**getDatabase()**](https://firebase.google.com/docs/reference/js/database.md#getdatabase), which also belongs to that module as well:  
`import { getDatabase, ref } from "blah-blah-blah.js"`  
`globalThis.ref = ref;`