I'm having trouble following the guide in the firebase documentation to link my firebase realtime database to my p5.js sketch.
Right now I have the following code.
Index.html
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.js"></script>
<script type="module" src="https://cdnjs.cloudflare.com/ajax/libs/firebase/9.8.4/firebase-app.js"></script>
<script type="module" src="https://cdnjs.cloudflare.com/ajax/libs/firebase/9.8.4/firebase-database.min.js"></script>
</head>
<body>
<main>
<script src="sketch.js"></script>
</main>
</body>
</html>
sketch.js
function setup() {
createCanvas(400,400);
background(0);
const firebaseConfig = {
...
};
const app = initializeApp(firebaseConfig);
}
To my understanding, this should, in order
sketch.js, where it then attempts to run initializeApp from the firebase libs.However, I'm getting this error:
🌸 p5.js says: [sketch.js, line 5] "initializeApp" is not defined in the current scope. If you have defined it in your code, you should check its scope, spelling, and letter-casing (JavaScript is case-sensitive).
What I already tried:
type="module tags from the script tags (this however resulted into another error, export declarations may only appear at top level of a module)undefined error when I tried importing a function from a secondary local sketch file, sketch2.js: I added <script type="module" src="ouija2.js"></script> to my HTML file, then tried calling it from sketch.js. When I removed the type="module" tag, I no longer had the undefined error and the function could be called.So in short, I think it has something to do with the type="module" tags. However, if I remove those, as mentioned, I get a different error, complaining about not being allowed to import/export somewhere other than the top level of a module.
Can someone explain to me why I'm getting this undefined error right now and how I could go about solving this issue?
I think I need to somehow get the firebase methods back in scope as I've had to hide them from scope by having to use the module tag, but I'm not sure how to do that.