I'm trying to use firebase with angular.
I've stuck at one point when my application said firebase.initializeApp is not a function.
const firebase = require("firebase");
(it was this before: import * as firebase from "firebase"; )
So I've checked the firebase variable and inside the object there wasn't any initializeApp only another "firebase" object and a few other property.
in the firebase object there was finally the initializeApp.
So my solution was:
firebase.firebase.initializeApp({...});
I have tried other solutions and they didn't work.
I've declared these variables so I can use firebase as normally I wanted:
const FIREBASE_APP = require("firebase");
const FIREBASE = FIREBASE_APP.firebase;
Does anyone know a better solution for it?
Maybe there is some problem with the mapping in my config file?
(I can provide my system.config.js)
In your app.module.ts, use AngularFireModule from angularfire2
import {AngularFireModule} from 'angularfire2';
...
imports: {
AngularFireModule.initializeApp({...}),
}
Related
During building an app, I couldn't be able to initialized firebase V9 in optimized form in expo react native. I switch from V8 to V9 And counter different error, which aren't making sense to me.
Like module idb missing from file "...\node_modules\#firebase\app\dist\esm\... even I create a metro.config.js File.
And Firebase could not be found within the project when it is present in (Firebase V8).
And this error, idk what's that about at node_modules\react-native\Libraries\LogBox\LogBox.js:149:8 in register.
Error at node_modules\react-native\Libraries\LogBox\LogBox.js:60:8 in errorImpl.... , here's the issue or check this problem
And undefined is not an object (evaluating '_app.default.apps').
All such questions and their answers are available on stackoverflow. But none of them work for me. And Im not elaborating these issues, just giving you idea. So I try some things, and it worked.
In above question, I tell about some errors and after many searching I was able to fixed my problem.
First, I delete .expo , .expo-share , node_modules , package-lock.json , and yarn.lock (if you have). Then yarn install or npm install.
Second, change the firebase code to this for V9. As I see many people suggesting to downgrade to V8 when above mentioned errors occurs when they don't need to.
import { initializeApp, getApps, getApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";
// import others as you need
const firebaseConfig = { ... };
let app;
if (getApps().length === 0) app = initializeApp(firebaseConfig);
else app = getApp();
const db = getFirestore(app);
const auth = getAuth();
export { auth, db };
For V8
import firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";
// import others as you need
const firebaseConfig = { ... };
let app;
if (firebase.apps.length === 0) app = firebase.initializeApp(firebaseConfig);
else app = firebase.app();
const db = app.firestore();
const auth = firebase.auth();
export { auth, db };
I mentioned about creating a metro.config.js, as I read comments in this problem, some are confusing is there problem related to firebase or metro file. For me, I guess its firebase. If still you get this error, then downgrade your to firebase#9.6.11, see here
I give reference of 2 errors, and other 2 are easily available. It work for me, I hope this will help anyone of you.
This is my firebase config.js file.
When I run the program it won't run with error msg : "import firebase from "/node_modules/.vite/firebase_app.js?v=46ca94a2";
It only worked when replaced firebase with older version (8.x.x)
but I got several vulnerabilities in my log.
Can anyone point out the problem , I want to use latest version if possible?
I checked the documentation but i found nothing is different from my code
https://firebase.google.com/docs/auth/web/start
import firebase from "firebase/app";
import 'firebase/firestore'
import "firebase/auth";
const firebaseConfig = {
....
}
firebase.initializeApp(firebaseConfig);
const projectFirestore = firebase.firestore()
const timestamp = firebase.firestore.FieldValue.serverTimestamp
const projectAuth = firebase.auth()
export {projectFirestore,timestamp,projectAuth}
There are several things that changed with Firebase 9, a reference guide is available here: https://firebase.google.com/docs/web/modular-upgrade
I cannot list all the changes here because there is quite a few and it depends on what/how you're already using it right now and which one you want to use later on (compat or modular).
But mainly, you will need to write the imports like this now
import { initializeApp } from "firebase/app"
The whole changelogs are available here.
I'm working on getting firebase working for a webapp project for class. It has not been easy. I keep getting errors, and every change I make creates a different error. Firebase is initialized in the project. Here is my most recent error:
>provider.ts:239 Uncaught Error: Component analytics has not been registered yet
>>at Provider.initialize (provider.ts:239),
>>at initializeAnalytics (api.ts:108),
>>at firebase-config.js:23,
>>>initialize # provider.ts:239,
>>>initializeAnalytics # api.ts:108,
>>>(anonymous) # firebase-config.js:23
This error seems to be stemming from my firebase-config file, but I'm genuinely lost:
// Import the functions you need from the SDKs you need
//import * as firebase from 'firebase/app';
import { initializeApp } from '../node_modules/firebase/firebase-app.js';
import { initializeAnalytics , getAnalytics } from '../node_modules/firebase/firebase-analytics.js';
const firebaseConfig = {
[config keys]
};
// Initialize Firebase
const fb_app = initializeApp(firebaseConfig); // returns an app
initializeAnalytics(fb_app); // added to circumvent error, but it still appears.
const analytics = getAnalytics(fb_app);
console.log(analytics);
export {fb_app};
Any help would be appreciated. Thanks
If you are using v9 SDK, your import statements must be
import { initializeApp } from 'firebase/app';
import { initializeAnalytics , getAnalytics } from 'firebase/analytics';
Not the files directly.
There is a relevant discussion here: https://issueexplorer.com/issue/firebase/firebase-js-sdk/5597
I Also Faced Same issue in React-native-web With webpack project. It was Just Conflict Issue in Webpack CompileLibs Dependencies. If You have "firebase" in Your webpack.config.js file remove from there.
I am trying to add Firebase (Firestore) to my Nuxt project, however I am recieving the following error when initialising a const from firebase.firestore() in my index.vue file:
Uncaught FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been
created - call Firebase App.initializeApp() (app/no-app).
I have installed Firebase in my project and also the module (#nuxtjs/firebase).
My nuxt.config.js file looks like this:
export default {
...
plugins: ['~/plugins/firebase.js'],
components: true,
buildModules: [
'#nuxt/typescript-build',
'#nuxtjs/tailwindcss',
],
modules: [],
...
}
And my firebase.js file is within my plugins folder as follows:
import firebase from 'firebase/app'
const config = {
...
}
let app = null
if (!firebase.apps.length) {
app = firebase.initializeApp(config)
}
export default firebase
I've compared the above to other examples online and haven't spotted any issues. However I'm new to everything from Nuxt to Firebase, so I may be missing something obvious. Any suggestions appreciated.
This typically happens if you call initializeApp() more than once on a single firebase app. If you're working with a single firebase db, make sure to initialize it when your app starts.
According to this GitHub Discussion this snippet for firebase.js should work:
import fb from "firebase/app"
export const firebase = !fb.apps.length ? fb.initializeApp(firebaseConfig) : fb.app()
// somecomponent.js
import {firebase} from "../firebase.js"
// do your firebase stuff here
Credit to #Brunocrosier with his post; even though this snippet isn't case-specific, I decided to include it for the sake of completeness.
Besides this thread - generally speaking, Uncaught FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app). is often a result of of either calling firebase. before initializing via .initializeApp(); or by calling .initializeApp() multiple times (for example Next.js might try to initialize it on the back- as well as the frontend - which seems to be the case in your code) within your firebase app.
Hence as a solution I highly suggest to move your initialization to the firebase.js file in order to initialize it directly when your app starts.
For further reading purposes:
The nuxt/firebase documentation
Error: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp()
The previously mentioned GitHub Discussion
FireBase JavaScript documentation
This normally happens when you try to access firestore before initializing the firebase. So as default we can check if firebase is initialized or not by firebase.apps.length but it's not a good practice to initialize firebase each and every time.
so if you are only using firestore then in your plugin you can export firestore directly after initialization like following,
import firebase from 'firebase/app'
const config = {
...
}
let app = null
if (!firebase.apps.length) {
app = firebase.initializeApp(config)
}
export default firebase.firestore()
But since you are working with nuxt there is special nuxt package called firebase/nuxt
with that installed you can define your configuration in nuxt config inside the module section as bellow,
modules: [
[
'#nuxtjs/firebase',
{
config: {
apiKey: '<apiKey>',
authDomain: '<authDomain>',
databaseURL: '<databaseURL>',
projectId: '<projectId>',
storageBucket: '<storageBucket>',
messagingSenderId: '<messagingSenderId>',
appId: '<appId>',
measurementId: '<measurementId>'
},
services: {
auth: true // Just as example. Can be any other service.
}
}
]
],
I think it is a better way to use firebase inside the nuxt.js
I am trying to implement some simple thumbs up/thumbs down functionality in a react app using cloud firestore. The app lets users search for movies and give it a thumbs up or down, and then I want to increment the value in my frestore database. When I try to do this I'm given the error "FieldValue is not a function".
Here is my code in the component:
import {db}from './firebase'
const firebase = require("firebase/firestore");
const movieDocRef = db.collection("ratings").doc(title);
const increment = firebase.FieldValue.increment(1);
movieDocRef.update({thumbsUP: increment})
And here is my firebase config file
const firebase = require("firebase");
// Required for side-effects
require("firebase/firestore");
const config = {
//my config data all should fine
};
export const fire = firebase.initializeApp(config);
export const db = fire.firestore();
Would appreciate any help you can give. I've looked at a few similar topics and nothing seems to have resolved this
Since you are using react, I suggest reviewing the documentation for getting started with Firebase using module bundlers. Your imports should look more like this when using version 8.0.0 or later of the Firebase SDKs:
import firebase from "firebase/app";
import "firebase/firestore"
const movieDocRef = firebase.firestore().collection("ratings").doc(title);
movieDocRef.update({ thumbsUP: firebase.firestore.FieldValue.increment(1) })