Develop Reference

Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app-compat/no-app)

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}

Failing to Retrieve Data from Firebase Real Time Database

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.

Environment variables not working for hiding firebase API key

I want to hide my firebase API key with the environment variable. But it gives an error.
Firebase.init.js File
import { initializeApp } from "firebase/app";
import { getAuth } from 'firebase/auth';
const firebaseConfig = {
apiKey: process.env.REACT_APP_apiKey,
authDomain: process.env.REACT_APP_authDomain,
projectId: process.env.REACT_APP_projectId,
storageBucket: process.env.REACT_APP_storageBucket,
messagingSenderId: process.env.REACT_APP_messagingSenderId,
appId: process.env.REACT_APP_appId
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
export default auth;
.env.local File
REACT_APPapiKey='XXX___XXXX'
REACT_APPauthDomain='XXXX___XXXX'
REACT_APPprojectId='XXXXX____XXXXX'
REACT_APPstorageBucket='XXXXX___XXXXX'
REACT_APPmessagingSenderId='XXXXX____XXXX'
REACT_APPappId='XXXXXX___XXXXX'

kindly ensure the variables defined are consistent:
Compare in your .env.local File and Firebase.init.js File
REACT_APPapiKey !== REACT_APP_apiKey
Also check how you are importing in the component where it's used

firebase' is not defined no-undef firebase error

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();

NextAuth Firebase Backend "ReferenceError: Cannot access 'app' before initialization"

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!