While deploying the SSR Nuxt 2 to firebase with functions and hosting it throws the following error in the image
Firebase.js code
// import { initializeApp } from "firebase/app";
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
require("firebase/compat/firestore");
var firebaseConfig = {
apiKey: "",
authDomain: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: "",
measurementId: "",
};
var fb = firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();
export { fb,db };
As Mentioned by #kissu, the issue seems to be with the firebase version.
Try upgrading to the latest firebase version. Since lower versions of Firebase doesn't have the updated compat libraries.
And Sometimes Package managers have some issues while updating the libraries to the latest version. You can resolve these issues by reinstalling firebase or deleting and adding node_modules and package.json.
Also check this similar thread
Related
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
const firebaseConfig = {
apiKey: "AIzaSyA-1CDIgbhEIzl3OuyBVj07f23bHcGdhi4",
authDomain: "netflix2-9d006.firebaseapp.com",
projectId: "netflix2-9d006",
storageBucket: "netflix2-9d006.appspot.com",
messagingSenderId: "834718120256",
appId: "1:834718120256:web:add5fc25daf4729190a2a5"
};
const fireabaseApp = firebase.initializeApp(firebaseConfig);
const db = fireabaseApp.firestore();
const auth = firestore.auth();
export {auth} ;
export default db;
this is my firebase.js file i have used latest firebase version even though i have been facing issue with firestore pls guide thank you
this is my firebase.js file i have used latest firebase version even though i have been facing issue with firestore .
can anyone guide how can i import firestore from the firebase Thank you.
I am using Google Sign In, Firebase, and React firebase hook to login react web application.
inserting firebaseConfig API (.env.local) file and setting the secret keys to firebase config causes errors on the console
.env.local
REACT_APP_AUTH_DOMAIN=doctors-portal-6bc13.firebaseapp.com
REACT_APP_PROJECT_ID=doctors-portal-6bc13
REACT_APP_STORAGE_BUCKET=doctors-portal-6bc13.appspot.com
REACT_APP_MESSAGING_SENDER_ID=725454304359
REACT_APP_APP_ID=1:725454304359:web:49840cbf09a6b578e210c2```
firebase.init.js file
import { initializeApp } from "firebase/app";
import {getAuth } from "firebase/auth";
const firebaseConfig = {
apiKey: process.env.REACT_APP_API_KEY,
authDomain: process.env.REACT_APP_AUTH_DOMAIN,
projectId: process.env.REACT_APP_PROJECT_ID,
storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
appId: process.env.REACT_APP_APP_ID,
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
export default auth;```
Works directly when using Firebase API without using (.env.local)
const firebaseConfig = {
apiKey: "AIzaSyA72Jfi_WXWie-i641mAYhLv3QgiynzLxQ",
authDomain: "doctors-portal-6bc13.firebaseapp.com",
projectId: "doctors-portal-6bc13",
storageBucket: "doctors-portal-6bc13.appspot.com",
messagingSenderId: "725454304359",
appId: "1:725454304359:web:49840cbf09a6b578e210c2",
};
writting like this does not give any error
try this: https://i.stack.imgur.com/xH4Dm.png
You have to place your .env path between `${
It works for me.
I had the same issue.
You just need to Restart the Server.
Close the server and start again with npm start.
This just worked fine for me.
(Every time you create or change anything in your .env file, you need to start the server again )
As I have not used firebase realtime DB only using firestore, if I disable the realtime db from firebase console, it stops the react app from running after login is success. I do have databaseURL property in firebase config. So how to detach the realtime firebase db from the react app. So that even if I disable realtime db from firebase it shouldn't affect my app.
import app from 'firebase/app';
import 'firebase/auth';
import 'firebase/database';
const firebaseConfig = {
apiKey: "",
authDomain: "",
databaseURL: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: ""
};
const db = app.database();
So, basically i am trying to save data in firebase an am getting the error "firebase is not defined"
my code:-
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.0.1/firebase-app.js";
const firebaseConfig = {
apiKey: "",
authDomain: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: ""
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
firebase // getting error over here
.firestore()
.collection("books")
.add({
title: "Of Mice and Men",
})
.then((ref) => {
console.log("Added doc with ID: ", ref.id);
// Added doc with ID: ZzhIgLqELaoE3eSsOazu
});
Since version 9 of its JavaScript SDK, Firebase has switched to a new modular syntax where you import individual functions. You'll have to choose whether you want to use the new syntax, or continue using the previous syntax through its compatibility layer.
To import the compatibility libraries, use:
// v9 compat packages are API compatible with v8 code
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
To then switch to the new syntax, follow the instructions in the same upgrade guide, and in the v9 tab of the code samples in the rest of the documentation.
I'm getting auth-domain-config-required errors when using firebase.auth().signInWithPopup(provider).
I've tried with Google and Facebook. I've tested on my hosted site, and it works fine. You can test it live: Quiver Chat Demo
I suspect there's a problem with localhost:3333... does it not like my port? I can't add a port to the Authorized domains list, and adding it to my authDomain: config doesn't help either.
Here's my auth code, but as you can see from the screenshots below, I tried a bunch of different authDomain values.
<script src="https://quiver-four.firebaseapp.com/__/firebase/4.6.2/firebase-app.js"></script>
<script src="https://quiver-four.firebaseapp.com/__/firebase/4.6.2/firebase-auth.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "AIzaSyCzNxnQ6WCJKejq6SBd7NqhVskxEOmDq_Y",
authDomain: "quiver-four.firebaseapp.com",
databaseURL: "https://quiver-four.firebaseio.com",
projectId: "quiver-four",
storageBucket: "quiver-four.appspot.com",
messagingSenderId: "1082528354495"
};
firebase.initializeApp(config);
</script>
Attempting localhost:3333
Attempting localhost
Attempting quiver-four.firebaseapp.com
The domains are added
You must not be providing the correct authDomain in your Firebase app initialization configuration.
You can get that web snippet from the Firebase Console. The authDomain has the form projectName.firebaseapp.com.
I had the same problem and my solution was to have a file in the root firebase.js with all the connection configuration:
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import {getAuth} from 'firebase/auth'
import { getAnalytics } from "firebase/analytics";
// 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
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "xxxxxxx_xxx_R-xxx-CDxxxxcg",
authDomain: "qxxxxxx-xxxx.firebaseapp.com",
projectId: "xxxxxx-xxxxx",
storageBucket: "xxxxxxx-xxxx.appspot.com",
messagingSenderId: "xxxxxxx",
appId: "1:xxxxxxx:wxb:xxxxxxxxxxxxxx",
measurementId: "G-xxxxx"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
export const db = getFirestore(app);
export const auth = getAuth(app);