I am trying to retrieve data from a firebase real-time database and I am following this tutorial from the firebase documentation: https://firebase.google.com/docs/database/admin/retrieve-data#section-start.
For my front-end framework I am using Svelte.
I set up the database in firebase.js.
firebase.js
// Import the functions you need from the SDKs you need
import { initializeApp } from 'firebase/app';
import { getDatabase } from 'firebase/database';
import { getAuth, GoogleAuthProvider } from 'firebase/auth';
const firebaseConfig = {
apiKey: "AIzaSyCHL9UcT3TtvgQwt7N3DbLjRon9gKPFjA0",
authDomain: "lyrics-and-quotes.firebaseapp.com",
databaseURL: "https://lyrics-and-quotes-default-rtdb.firebaseio.com",
projectId: "lyrics-and-quotes",
storageBucket: "lyrics-and-quotes.appspot.com",
messagingSenderId: "492758193692",
appId: "1:492758193692:web:60ab73db53010e7fa7b1d9",
measurementId: "G-T33YSTR82R",
};
// Initialize Firebase
initializeApp(firebaseConfig);
// Initialize Realtime Database and get a reference to the service
export const db = getDatabase(app);
// Initialize auth
export const auth = getAuth();
// Initialize Google auth provider
export const googleProvider = new GoogleAuthProvider();
On one of my front-end components, I have:
import { db } from '../database/firebase';
const postsRef = db.ref('posts');
However, I get the error: Posts.svelte:5 Uncaught TypeError: db.ref is not a function.
app is not defined in your firebase.js file.
You need to do
const app = initializeApp(firebaseConfig);
export const db = getDatabase(app);
as shown in the doc.
Related
I am using a react js to build a gallery program, using firebase as the backend.
But I got some error and error in the config.js. I already follow some questions here, but nothing works for me.
So this is my config.js:
// import firebase from 'firebase/app';
import firebase from 'firebase/compat/app';
// import { initializeApp } from 'firebase/app';
// import 'firebase/compat/auth';
// import 'firebase/compat/firestore';
import 'firebase/storage';
import 'firebase/firestore';
import 'firebase/compat/storage'
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// 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: "",
authDomain: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: ""
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
// firebase.initializeApp();
const projectStorage = firebase.storage();
const projectFirestore = firebase.firestore();
export { projectStorage, projectFirestore}
The error I got is: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app-compat/no-app).
See that I commented on the code, to see some errors, and it still giving me the same result.
Note:
I am using firebase ^9.16.0"
React JS
I found the solution for my own problem.
So that If you're using version 9 (in my case firebase 9.16.0) so you also have to add import 'firebase/compat/firestore'; not import 'firebase/firestore';
This returns me TypeError: firebase_compat_app__WEBPACK_IMPORTED_MODULE_0__.default.firestore is not a function
And then changed the way to initialize the app from const app = initializeApp(firebaseConfig); to firebase.initializeApp(firebaseConfig);
Now it works fine in my project.
My final code is below, and you can see the different between the above one in the question:
import firebase from 'firebase/compat/app';
import "firebase/database"
import 'firebase/storage';
import 'firebase/compat/firestore';
import 'firebase/compat/storage';
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// 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: "your api",
authDomain: "your domain",
projectId: "your project id",
storageBucket: "your storage",
messagingSenderId: "your id",
appId: "your app id"
};
// Initialize Firebase
// const app = initializeApp(firebaseConfig);
firebase.initializeApp(firebaseConfig);
const projectStorage = firebase.storage();
const projectFirestore = firebase.firestore();
export { projectStorage, projectFirestore}
I am creating a signup page that requires thumbnail. firebase authentication is working fine but the i am getting this error for the storage
import firebase from 'firebase/app'
import 'firebase/firestore'
import 'firebase/auth'
import 'firebase/storage'
const firebaseConfig = {
apiKey: "AIzaSyDjltfm2KlCLu1wYpbKl5A9pnxGv_7dxMc",
authDomain: "sunodojo.firebaseapp.com",
projectId: "sunodojo",
storageBucket: "sunodojo.appspot.com",
messagingSenderId: "482721025907",
appId: "1:482721025907:web:96cd2758994da9be01bf06"
};
// initializing firebase
firebase.initializeApp(firebaseConfig)
// initializing services
const projectFirestore = firebase.firestore()
const projectAuth = firebase.auth()
const projectStorage = firebase.storage()
// timestamp
const timestamp = firebase.firestore.Timestamp
export { projectFirestore, projectAuth, projectStorage, timestamp }
When i look up this error its with flutter or React Native. All the the solutions I have come across did not help.
I have also done it like this 👇. If i do i get a - Maximum call stack size exceeded error
const app = firebase.initializeApp(firebaseConfig)
Any help will be appreciated.
import {firebase} from './firebase'
import {getFirestore} from 'firebase/firestore'
import {getStorage} from 'firebase/storage'
const firebaseConfig ={
apiKey: "",
authDomain: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: "",
measurementId: ""
};
const db = getFirestore()
const storage = getStorage()
const app = !getApps().length ? initializeApp(firebaseConfig) : getApp()
export {db,storage,firebase,app}
I'm not totally sure what is being imported as firebase at the top, but you must initialize Firebase before any other service but currently it's the opposite way. Try refactoring the order of statements as shown below:
// import { firebase } from './firebase'
import { getFirestore } from 'firebase/firestore'
import { getStorage } from 'firebase/storage'
const firebaseConfig = {...};
// Initialize Firebase first
const app = initializeApp(firebaseConfig)
const db = getFirestore()
const storage = getStorage()
export {db, storage, firebase, app}
Also if that ./firebase file just has this statement firebase.initializeApp(firebaseConfig) which is older syntax then can you try removing the file?
Can't use Firebase in react app, I installed Firebase using npm install firebase and created Firebase project. And I added the code provide by Firebase.
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// 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: "xxxxxx",
authDomain: "xxxxx",
projectId: "xxxx",
storageBucket: "xxxx",
messagingSenderId: "xxxx",
appId: "xxxx"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
// export
export const auth = firebase.auth();
export const googleAuthProvider = new firebase.auth.GoogleAuthProvider();
then I used it in react component like below
import {auth} from '../../firebase';
and it says can't compile like
this
You are using the new Firebase Modular SDK which does not use firebase. namespace (same for importing AuthProviders). To initialize Firebase auth you must import getAuth() function from firebase/auth as shown below:
import { initializeApp } from "firebase/app"
import { getAuth, GoogleAuthProvider } from "firebase/auth"
const firebaseConfig = {...};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
// export
export const auth = getAuth(app);
// initialize this way ^^^
export const googleAuthProvider = new GoogleAuthProvider();
I'm trying to store users on a firebase backend when using next auth I can't get around this error
Using next-auth FIREBASE adapter.
https://next-auth.js.org/adapters/firebase :DOCS IM FOLLOWING
FIREBASE CLIENT
import firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASURMENT_ID,
};
// Initialize Firebase
const analytics = getAnalytics(app);
const app = initializeApp(firebaseConfig);
export default firebase;
[...nextauth].js
import NextAuth from "next-auth";
import { FirebaseAdapter } from "#next-auth/firebase-adapter";
import firebaseClient from "../../../firebase/FirebaseClient";
import GoogleProvider from "next-auth/providers/google";
import firebase from "firebase/app";
import "firebase/firestore";
const firestore = (firebase.apps[0] ?? firebaseClient).firestore();
export default NextAuth({
// Configure one or more authentication providers
providers: [
GoogleProvider({
clientId: process.env.GOOGLE_CLIENT_ID,
clientSecret: process.env.GOOGLE_CLIENT_SECRET,
}),
],
adapter: FirebaseAdapter(firestore),
});
err
ReferenceError: Cannot access 'app' before initialization
I bet you need to switch lines as following, because you don't have app variable when you create analytics:
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
Alternative Problem: Internally-referenced Functions
Our issue was a bit different. If you've developed a cloud function that has an internally-referenced function, like this:
export.foo = functions.https.onCall(async () => {
// Some functionality here that references internalFunc
const internalFunc = () => { ... }
}
That internalFunc won't be able to be referenced.
The solution for us is to create a utilities.js file in our functions directory, then export the internalFunc from that file. Then, import that function to the script where you're deploying the cloud function.
Hope this helps someone!