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.
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.
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 created login code for my website using reactjs. when I edit the codes and run the program, it will be an error.
heres an error
enter image description here
I am already uploaded the code on codesandbox
the link for the code
In the future, please include a minimal working example of your code and what the error is in your question.
That said, the reason you are getting ...default.auth is not a function is because the default export of ./firebase/firebase.js is a firebase.database.Reference, not the general firebase namespace you were expecting.
export default fireDb.database().ref(); // A firebase.database.Reference
However as you named the variable fireDb, it is implied that it is an instance of Firebase Database, not a reference. I recommend renaming your variables to reflect this.
The file ./firebase/firebase.js:
import firebase from 'firebase/app'
import 'firebase/database'
const firebaseConfig = { ... };
// Initialize Firebase
const fireApp = firebase.initializeApp(firebaseConfig);
export default fireApp.database();
Then, to get an instance of firebase.auth.Auth from a firebase.database.Database, you would use fireDb.app.auth().
The file ./App.js:
import fireDb from "./firebase/firebase";
/* ... */
const handleLogout = () => {
fireDb.app.auth().signOut();
};
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) })
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({...}),
}