I am currently working on creating a music player using react and decided to use Firebase to store data and host my site. However, when I try to start up my development server through npm start, I come across the following error:
Failed to compile Line 19:1: 'store' is not defined
Line 24:26: 'store' is not defined
Line 25:22: 'store' is not defined
To install Firebase, I ran npm install --save firebase and connected my local project to my Firebase project through firebase init.
I wrote the following (note: I chose to write "a" for firebase config fields for privacy/security reasons):
import * as firebase from "firebase/app"
import "firebase/firestore"
import "firebase/storage"
const firebaseConfig = {
apiKey: "a",
authDomain: "a",
databaseURL: "a",
projectId: "a",
storageBucket: "a",
messagingSenderId: "a",
appId: "a",
measurementId: "a"
};
firebase.initializeApp(firebaseConfig)
store = firebase.firestore() // Line 19
Here is what I wrote for lines 24-25:
const cloudPlaylists = store.collection("playlists"); // Line 24
const cloudSongs = store.collection("songs"); // Line 25
I've looked at it for some time and I still can't figure out how I am getting this error, I've used Firebase before and never came across this issue before, so I'm completely stuck. Any help or feedback is appreciated in helping me solve this issue. Thank you.
You have to declare a variable before you can use it.
const store = firebase.firestore()
Related
So i've read many topics and lose so much time cause of this issue.
My components don't load anymore and i'm receiving this error in my console : 'FirebaseError: Firebase: Error (auth/invalid-api-key).'
(I specify that is my first project using firebase).
About my firebase.config.js :
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
const app = firebase.initializeApp({
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_MESSAGING_APP_ID
});
export const auth = app.auth();
export default app;
About my .env.local :
REACT_APP_API_KEY=AIXXXXzaSyX_ITiQXXXXXXXXxcXXXXXXXxU
REACT_APP_AUTH_DOMAIN=XXXXX.firebaseapp.com
REACT_APP_PROJECT_ID=name-name-name
REACT_APP_STORAGE_BUCKET=name-name-name.appspot.com
REACT_APP_MESSAGING_SENDER_ID=5XXX7XXXX5XX
REACT_APP_MESSAGING_APP_ID=1:5XXXX4XXX7X:web:aXXXXxxx0xxxxb4a4xxxxxxdd
**About files location : **
src/utils/firebase.config.js
src/.env.local
About the auth process :
Authentication is used in a signUp component that matches a form
Thanks for reading
When I just paste the API_KEY directly in app like this : apiKey: "string". This works, so I think this issue come from my .env file.
I think you're using create-react-app. If that is the case you need to add the .env file to the root of your project, not the src folder.
See the docs for more info on env vars in create react app https://create-react-app.dev/docs/adding-custom-environment-variables/#adding-development-environment-variables-in-env
I am trying to use firebase in my new React app but I am always getting "The development server returned response errror code: 500"
And I have no ideo of what am I doing wrong. I only created a firebase.js file to put my firebase configuration
import * as firebase from 'firebase'
const firebaseConfig = {
apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
authDomain: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
projectId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
storageBucket: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
messagingSenderId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
appId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
measurementId: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
}
export {firebase};
I am getting this error in the terminal (and I am sure of having installed firebase):
Unable to resolve "firebase" from "firebase.js"
This doesn't look right, you imported firebase never used it you created config never used it, is this the whole code ?
Please try to follow firebase documentation, last i checked you had to import only the initializeApp function with config object.
here this might help - Firebase Setup for React App
I am working on a react project and I need firebase for authentication I have installed firebase using "npm i firebase" & firebase-tools using "npm i firebase-tools" also the path is correct. There is no problem in defining the path. Everything from my side is correct then also it is showing the above error.
--- Please help -----
Why this is happening?
If you give a look at firebase package version(inside package.json) then it's version 9. Now firebase has added a new compatibility option so can use the /compat folder in your imports.
I have made some changes in Firebase.js file please replace your code
with the given below and then start your dev server.
import firebase from "firebase/compat/app"
import "firebase/compat/auth"
import "firebase/compat/firestore"
import "firebase/compat/storage"
const firebaseConfig = {
apiKey: "AIzaSyA9BnlX96fMf7XiUVCFRsoQzG8DGERJkeY",
authDomain: "disneyplus-clone-a33d5.firebaseapp.com",
projectId: "disneyplus-clone-a33d5",
storageBucket: "disneyplus-clone-a33d5.appspot.com",
messagingSenderId: "37918794208",
appId: "1:37918794208:web:dbe9842dfe1dda522a4b85",
measurementId: "G-DRVLJKWRWG",
};
firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();
const auth = firebase.auth();
const provider = new firebase.auth.GoogleAuthProvider();
const storage =firebase.storage();
export { auth,provider,storage};
export default db;
I found this line of code in the Firebase docs firebase.functions().useEmulator('localhost', 5001) that supposedly points your Vue app to the locally running emulator, but for some reason my project is ignoring said line of code and continues to call the remotely deployed function instead.
Here's what the relevant part of my #/plugins/firebase.js looks like:
import firebase from 'firebase/app';
import 'firebase/functions';
firebase.initializeApp({
apiKey: process.env.VUE_APP_FIREBASE_API_KEY,
authDomain: process.env.VUE_APP_FIREBASE_AUTH_DOMAIN,
databaseURL: process.env.VUE_APP_FIREBASE_DATABASE_URL,
projectId: process.env.VUE_APP_FIREBASE_PROJECT_ID,
storageBucket: process.env.VUE_APP_FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.VUE_APP_FIREBASE_MESSAGE_SENDER_ID,
appId: process.env.VUE_APP_FIREBASE_APP_ID,
measurementId: process.env.VUE_APP_FIREBASE_MEASUREMENT_ID
});
firebase.functions().useEmulator('localhost', 5001);
const func = {
botcheck: firebase.app().functions('europe-west2').httpsCallable('validateRecaptcha'),
};
export { func };
And then to call the botcheck function, I'll run the following in a Vuex action:
const fb = require('#/plugins/firebase');
...
await fb.func.botcheck();
What am I doing wrong? How do I get it to correctly point to my locally running emulator?
Vue project versions:
vue: 2.6.11
firebase: 8.3.2
Functions project versions:
firebase-admin: 9.2.0
firebase-functions: 3.11.0
Let me know if I need to include additional information.
This line:
firebase.functions()
is functionally equivalent to:
firebase.app().functions('us-central1')
In your current code, you connect functions that don't specify a region to the emulator. Because you specify the region as europe-west2 when using it, you need to connect the europe-west2 functions to the emulator. You can do this by changing this line:
firebase.functions().useEmulator('localhost', 5001);
to use the correct region:
firebase.app().functions('europe-west2').useEmulator('localhost', 5001)
Additional Note: While firebase.functions() and firebase.app().functions() return the same instance of a Functions object (connected to the us-central1 region), firebase.app().functions('us-central1') (where you pass in the region) returns a different instance of Functions. You would need to connect each instance that you use to the emulator.
Here's your code as I make sure that useEmulator() is configured properly with Cloud Functions for Firebase Emulator. Feel free to try it:
import firebase from 'firebase/app';
import 'firebase/functions';
const firebaseConfig = {
// Your config
};
const app = firebase.initializeApp(firebaseConfig);
const functions = app.functions('europe-west2');
functions.useEmulator('localhost', 5001);
const func = {
botcheck: functions.httpsCallable('validateRecaptcha'),
};
export { func };
My app is connected to firebase and auth is working fine. However, when trying to use firestore I can't figure out this problem.
Possible Unhandled Promise Rejection (id: 0):
Error: No Firebase App '[DEFAULT]' has been created - call firebase.initializeApp()
I am getting the above error however, I am already calling initializeApp and not sure what else to try. I am trying to get access to a collection on firestore and print it out but it gives me the error when I try to access firestore.
I have tried doing console.log(firebase.app().name) which gives the name of the app, so not sure how it is not initialised.
var firebaseConfig = {
apiKey: "***",
authDomain: "***",
databaseURL: "***",
projectId: "***",
storageBucket: "***",
messagingSenderId: "***",
appId: "***",
measurementId: "****",
}
firebase.initializeApp(firebaseConfig)
const db = firebase.firestore()
My imports are
import "firebase/firestore"
import firebase from "firebase"
import firestore from "#react-native-firebase/firestore"
I have tried so many different questions on here and forums but nothing has helped
Make sure that you made all the configuration correctly by following this video
And just make sure that the first 2 lines at main function are (follow the same order):
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
//rest of the code
runApp(MyApp());
}
As per Kishan above. I added the google-services.json file into the android level folder and modified both build.gradle files.
https://firebase.google.com/docs/android/setup followed step 3 here to update the build.gradle files to use google-services.