Wanted to try out the new firebase. However I can't get it working.
app-88ac8456cb.js:14207 Uncaught TypeError: firebase.intializeApp is not a function
I was using ES6 imports, however even if I use commonjs like in the docs, its not working.
const config = {
apiKey: "....",
authDomain: ".....firebaseapp.com",
databaseURL: "https://.....firebaseio.com",
storageBucket: ".....appspot.com",
};
let firebase = require('firebase');
let fireapp = firebase.intializeApp(config);
Installed: "firebase": "^3.0.1"
Node: 6.2.0
And using gulp with browserify
intializeApp is a typo. You want initializeApp.
If you cut and paste that from somewhere let me know and we can try and get it fixed!
This worked for me:
import 'firebase';
const config = {
apiKey: "....",
authDomain: ".....firebaseapp.com",
databaseURL: "https://.....firebaseio.com",
storageBucket: ".....appspot.com",
};
firebase.initializeApp(config);
firebase.database().ref(...)
//or
let fb = firebase.initializeApp(config);
fb.database().ref(...)
Related
If I use expo start, my firestore work fine in Expo Go. But when i use expo start --dev-client it stop working. I already tried using EAS using EAS Migration Guide, but the same error happen.
Here is the Error message:
#firebase/firestore:, Firestore (8.2.2): Could not reach Cloud Firestore backend. Backend didn't respond within 10 seconds.
This typically indicates that your device does not have a healthy Internet connection at the moment. The client will operate in offline mode until it is able to successfully connect to the backend.
at node_modules/#firebase/logger/dist/index.cjs.js:98:8 in defaultLogHandler
at node_modules/#firebase/logger/dist/index.cjs.js:212:8 in Logger.prototype.error
at node_modules/#firebase/firestore/dist/rn/prebuilt.rn-f9cd27ba.js:60:8 in P
at node_modules/#firebase/firestore/dist/rn/prebuilt.rn-f9cd27ba.js:8135:20 in <global>
at node_modules/#firebase/firestore/dist/rn/prebuilt.rn-f9cd27ba.js:8105:8 in stream.onMessage$argument_0
at node_modules/#firebase/firestore/dist/rn/prebuilt.rn-f9cd27ba.js:5218:67 in Ds#constructor
at node_modules/#firebase/firestore/dist/rn/prebuilt.rn-f9cd27ba.js:11781:54 in <global>
#firebase/firestore:, Firestore (8.2.2): Connection, WebChannel transport errored
There is no problem with my connection, because the API in the App is still working.
is there an additional setting for EAS or expo-dev-client?
Here is how i start my firebase
class FirebaseServices {
static handleFirebaseConfig() {
var firebaseConfig = {
apiKey: 'API_KEY',
authDomain: "firebaseapp.com",
projectId: "PROJECT_ID",
storageBucket: "STORAGE",
messagingSenderId: "ID",
appId: "APP_ID",
measurementId: "ID"
};
let app;
if (firebase.apps.length === 0) {
app = firebase.initializeApp(firebaseConfig)
}
else {
app = firebase.app();
}
return app;
}} const db = FirebaseServices.handleFirebaseConfig().firestore()
I solve this using the answer from the thread, by adding experimentalForceLongPolling.
class FirebaseServices {
static handleFirebaseConfig() {
var firebaseConfig = {
apiKey: 'API_KEY',
authDomain: "firebaseapp.com",
projectId: "PROJECT_ID",
storageBucket: "STORAGE",
messagingSenderId: "ID",
appId: "APP_ID",
measurementId: "ID"
};
let app;
if (firebase.apps.length === 0) {
app = firebase.initializeApp(firebaseConfig)
firebase().firestore().settings({
experimentalForceLongPolling: true, // this line
useFetchStreams: false, // and this line
})
}
else {
app = firebase.app();
}
return app;
}
}
const db = FirebaseServices.handleFirebaseConfig().firestore()
And i already upgrade my firebase to v9, so it change to something like this
const app = initializeApp(firebaseConfig);
const firestoreDB = initializeFirestore(app, {
experimentalForceLongPolling: true,
useFetchStreams: false,
})
export const dbFs = getFirestore(app);
I m trying to fire base connectivity with react native
import * as firebase from 'firebase';
componentWillMount(){
var config = {
apiKey: "API_KEY",
authDomain: "*******-****.firebaseapp.com",
databaseURL: "https://*******-****.firebaseio.com",
projectId: "*******-****",
storageBucket: "*******-*****.appspot.com",
messagingSenderId: "************",
};
firebase.initializeApp(config);
console.log(firebase);
}
How do I solve this error?
Error:
TypeError: undefined is not a function (evaluating 'firebase.initializeApp(config)')
import it like
var firebase = require("firebase");
or
import firebase from ‘firebase’;
I've used Vue-cli 3 to create a Vue app and I've been trying to incorporate FCM into it. However, I've been working on it for two days and I still cannot get it working.
First, here's my
importScripts('https://www.gstatic.com/firebasejs/4.8.1/firebase- app.js');
importScripts('https://www.gstatic.com/firebasejs/4.8.1/firebase-messaging.js');
var config = {
messagingSenderId: "69625964474"
};
firebase.initializeApp(config);
const messaging = firebase.messaging();
messaging.setBackgroundMessageHandler(function (payload) {
console.log('[firebase-messaging-sw.js] Received background message ', payload)
// Customize notification here
const notificationTitle = 'Background Message Title';
const notificationOptions = {
body: 'Background Message body.',
icon: '/firebase-logo.png'
}
return self.registration.showNotification(notificationTitle, notificationOptions)
});
```
One solution that sorta works is I moved this file into the public folder and register it in App.vue using
const registration = await navigator.serviceWorker.register(`${process.env.BASE_URL}firebase-messaging-sw.js`)
messaging.useServiceWorker(registration)
However, then I'll be having two service workers (the other one from Vue itself).
I tried to modify vue.config.js instead trying to work with Workbox by adding the following config:
module.exports = {
pwa: {
name: 'My App',
themeColor: '#4DBA87',
msTileColor: '#000000',
appleMobileWebAppCapable: 'yes',
appleMobileWebAppStatusBarStyle: 'black',
// configure the workbox plugin
workboxPluginMode: 'InjectManifest',
workboxOptions: {
// swSrc is required in InjectManifest mode.
swSrc: 'public/firebase-messaging-sw.js'
// ...other Workbox options...
}
}
}
And then register it again in App.vue:
const registration = await navigator.serviceWorker.register(`${process.env.BASE_URL}service-worker.js`)
messaging.useServiceWorker(registration)
Then I got the following error instead:
If you are confused by the files I mentioned or how the directory of my project looks like, what I did was simply creating a PWA using vue-cli 3. And I left most of the structure untouched.
And I set up firebase in main.js:
import firebase from '#firebase/app'
Vue.config.productionTip = false
const config = {
apiKey: process.env.VUE_APP_FIREBASE_API_KEY,
authDomain: process.env.VUE_APP_AUTH_DOMAIN,
databaseURL: process.env.VUE_APP_DATABASE_URL,
projectId: process.env.VUE_APP_PROJECT_ID,
storageBucket: process.env.VUE_APP_STORAGE_BUCKET,
messagingSenderId: process.env.VUE_APP_MESSAGING_SENDER_ID
}
firebase.initializeApp(config)
Then in App.vue:
import firebase from '#firebase/app'
import '#firebase/messaging'
const messaging = firebase.messaging()
messaging.usePublicVapidKey('PUBLIC_KEY')
The service worker is by default disabled in development mode, so running it in development will cause an HTML error page to be returned, this is the reason you are getting text/html error
You can find detailed explanation here LINK
How could set the firebase to infinitered/ignite the best way?
I'm starting now and have several doubts however I think you should add a FirebaseConfig.js in the / Config. Right?
My file FirebaseConfig.js now.
import Config from 'react-native-config'**
const firebase = require ( 'firebase');
// Initialize Firebase
import Config from 'react-native-config'
const firebase = require('firebase');
// Initialize Firebase
const firebaseConfig = {
apiKey: Config.FIREBASE_API_KEY,
authDomain: Config.FIREBASE_AUTH_DOMAIN,
databaseURL: Config.FIREBASE_DATABASE_URL,
storageBucket: Config.FIREBASE_STORAGE_BUCKET,
messagingSenderId: Config.FIREBASE_MESSAGING_SENDER_ID
};
const firebaseApp = firebase.initializeApp(firebaseConfig);
I am new to Vue Js and Firebase. I want to learn firebase /firestore db connection ,data in/out but i am not getting any proper documentation or tutorial for the same.Please suggest.
I am using VUE CLI 2.
Create a src/firebaseDb.js file then add the following code to establish the real-time database connection in vue with your Firebase configurations details.
import * as firebase from 'firebase';
const firebaseConfig = {
apiKey: "api-key",
authDomain: "project-id.firebaseapp.com",
databaseURL: "https://project-id.firebaseio.com",
projectId: "project-id",
storageBucket: "project-id.appspot.com",
messagingSenderId: "sender-id",
appId: "app-id",
measurementId: "G-measurement-id"
}
const firebaseApp = firebase.initializeApp(firebaseConfig);
export const db = firebaseApp.firestore();
You can check this link its quite easy
https://www.positronx.io/vue-js-firebase-build-vue-crud-app-with-cloud-firestore/
i have created firebaseConfig.js file and connect to fire store.
import firebase from 'firebase/app'
require('firebase/firestore');
// Initialize Firebase
var config = {
apiKey: "AIzaSyC944Kh9T_Pcdn-kTZ6LywsIUATJBmQNTI",
authDomain: "halo-care-38f05.firebaseapp.com",
databaseURL: "https://halo-care-38f05.firebaseio.com",
projectId: "halo-care-38f05",
storageBucket: "halo-care-38f05.appspot.com",
messagingSenderId: "682838402004"
};
const firestore =firebase.initializeApp(config);
const db = firebase.firestore();
export default db;