react firebase initializeApp is not defined - javascript

I am trying to use firebase storage on react app,
but I get a error that I dont know where is coming from
Line 15:15: 'initializeApp' is not defined
This is my config.js File
Thanks for help
import firebase from "firebase/compat/app";
import 'firebase/storage';
import 'firebase/firestore';
const firebaseConfig = {
apiKey: "//myapikey",
authDomain: "//firebase name.firebaseapp.com",
projectId: "//firebase name",
storageBucket: "//firebase name.appspot.com",
messagingSenderId: "156082439629",
appId: "//appid..."
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const projectStorage = firebase.storage();
const projectFirestore = firebase.firestore();
export {
projectStorage,
projectFirestore
};

If you want to use compat version of Firebase SDK then you would have to import compat version of other Firebase services too. Try refactoring the code as shown below:
import firebase from "firebase/compat/app";
import 'firebase/compat/storage';
import 'firebase/compat/firestore';
const firebaseConfig = {...};
// Initialize Firebase
const app = firebase.initializeApp(firebaseConfig);
// with firebase. namespace
const projectStorage = firebase.storage();
const projectFirestore = firebase.firestore();
export {
projectStorage,
projectFirestore
};
However, I would recommend using the Modular SDK and initialize Firebase like this:
import { initializeApp } from "firebase/app";
import { getStorage } from 'firebase/storage';
import { getFirestore } from 'firebase/firestore';
const firebaseConfig = {...};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const projectStorage = getStorage();
const projectFirestore = getFirestore();
export {
projectStorage,
projectFirestore
};
Also checkout Getting started with Firebase for the web

Related

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.

Uncaught FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app). - In React.js

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?

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

Next JS firebase TypeError: firebase_app__WEBPACK_IMPORTED_MODULE_1__.storage is not a function

import * as firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/storage';
Already added the firestore import here so that fixed most of everybody elses problem
const clienteCredentials = {
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_MEASUREMENT_ID
};
export default function initFirebase() {
if (!firebase.apps.length){
firebase.initializeApp(clienteCredentials);
}
}
Keeps getting the error here:
const projectStorage = firebase.storage();
const projectFirestore = firebase.firestore();
export { projectFirestore, projectStorage };
If you are using Firebase V9.0.0+ then you can use compat version to keep using existing code (V8 name-spaced syntax):
import firebase from "firebase/compat/app"
import "firebase/compat/storage"
import "firebase/comapt/firestore"
I'd recommend upgrading to new Modular Syntax which has certain benefits and supports tree-shaking. The newer syntax looks like:
import { initializeApp } from "firebase/app" // no compat
import { getFirestore } from "firebase/firestore"
import { getStorage } from "firebase/storage"
const app = initializeApp({...config})
const firestore = getFirestore(app)
const storage = getStorage(app)
Do checkout the documentation which has examples of both older and newer syntaxes.

Categories

Resources