Firebase problem
Hello friends i'm trying to add firebase cloud messaging to test firebase and try to implement something easy into a small button but i just keep getting problems after problem i used npm to install firebase and it keeps saying errors when i try to import it then i ended up importing it from link which worked at first but wouldn't let the whole code process now any help with be appreciated i've been trying to follow every tutorial and guid but i even copy and pasted the code they have and it didn't work
36 Replies
the problem i face in this code is the last line
and after i installed firebase using npm this is the error i have trying to use the normal thing
what bundler are you using?
npm
also been trying all kind of cdn but still wouldn't even let me console.log(firebase)
npm's the package manager, I mean vite or something like it?
vanilla js
No framework just normal javascript
ah, nm, I didn't realize you could
import from a URL nowadays in vanilla jsyah lol they let you do that i use some libraries like that sometime
that's from firebase
i'm pretty new to fire base this is like the first time i even try it and idk if there's something i must do before using it
the thing now i'm looking at fireship video talking about basic firebase setup and he can console.log firebase and get an object while i can't
but for me it shows that https://i.imgur.com/3CFWvty.png
I only played around with it a little myself, and that was using vite and npm... the 404 errors are weird, I don't see any references in your code to locally hosted scripts for firebase
Can i know how to add that?
I'm looking at fireship video and followed what he did and other videos like him
I gotta admit, I've never set up vite myself, it always just comes along with sveltekit or whatever other framework I'm using <_<
Can you copy/paste this so I can try running it locally without re-typing everything?
Okie
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.17.1/firebase-app.js";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
const firebaseConfig = {
apiKey: "AIzaSyDqV0x1Ghsm51vauGm5-IJBcOKXagOKWdg",
authDomain: "gfattentionbutton.firebaseapp.com",
databaseURL: "https://gfattentionbutton-default-rtdb.europe-west1.firebasedatabase.app",
projectId: "gfattentionbutton",
storageBucket: "gfattentionbutton.appspot.com",
messagingSenderId: "939746855769",
appId: "1:939746855769:web:1e3334ecdd63d00c849a48"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
console.log(firebase)
I think the first thing i need to do is be able to console.log firebase
firebase isn't defined anywhere in that script, so it's not available to be logged.
ahh correct
he's not quite pasting what you pasted here, I think he's also including these two
i'm just trying everything to fix it lol
first one is to call the firebase so i can use it without importing it like this( import { initializeApp } from "https://www.gstatic.com/firebasejs/9.17.1/firebase-app.js";)
and the second one is to call the function i want to use which is cloud messaging
it's also a 2 year old tutorial, it might not work exactly the same anymore
yah but i've been stuck in the same problem for the past 2 days and i'm trying everything at this point tbh
so all the code now worked beside one line
might be best to try from scratch using nothing but the firebase docs, mixing and matching tutorials is never a good idea, especially when there's two major versions between the tutorial and the one you're using
i console.log the variables and it all works beside the last one
on i put what they said in the docs and still get the error
it looks like firebase-messaging requires a local script to exist, maybe it's further down in the docs?
it's the second step and they ask to replace the key with what i have in firebase
i apologize if that's a rookie thing to ask but it just keeps giving errors
seems like there's a bunch of extra steps: https://stackoverflow.com/questions/63799227/fcm-gettoken-failed-to-register-a-serviceworker-for-scope-error-flutter-web/63800226#63800226
it's also 2 years old, but might still be useful
I wouldn't know what the problem is otherwise. It seems like it expects a firebase-messaging-sw.js file to exist, but I don't personally know why or have any further experience with firebase. I hope either the stack overflow answer helps, or someone else peeks in and can answer
thank you for your time and effort ! appreciate it!
no worries 🙂