In my Typescript-React-Firebase app, I've created a file with the following content:
import * as firebase from 'firebase/app';
import 'firebase/auth';
firebase.initializeApp({ ... });
export default firebase;
I'm then importing firebase from here in the other files in my project.
Is this correct / necessary? Could I just call initialize once in my top level component and then import firebase from firebase/app and firebase/auth? Is there a disadvantage to my approach?
This approach is quite common, as it allows you to centralize the Firebase configuration data and initialization call, while also simply using the Firebase SDK everywhere else.
Related
I am getting the below error:
You are using the memory-only build of Firestore. \
Persistence support is only available via the #firebase/firestore bundle \
or the firebase-firestore.js build.
I'm using the below imports
import "expo-firestore-offline-persistence";
import firebase from "firebase";
import "firebase/firestore";
Since Expo managed workflow does not support persistence, I'm using expo-firestore-offline-persistence package that I found.
How do I get the non-memory-only build of Firestore?
Memory-only Firestore was added in Version 7.13.0: March 26, 2020:
Added a memory-only firestore build. Instead of persisting data in the IndexedDB, it keeps it in memory. This build is about 14% smaller than the full featured build because it doesn't have IndexedDB related code. If you don't care about persisting data across sessions, or your code runs in environments that don't support IndexedDB, use this build to reduce your application size. It is available under a special import path. You can import it this way:
import * as firebase from 'firebase/app';
import 'firebase/firestore/memory';
// Don't change the format for any other products.
import 'firebase/auth';
// etc.
Or if using the CDN:
<script src="https://www.gstatic.com/firebasejs/7.13.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.13.0/firebase-firestore.memory.js"></script>
<!-- Don't change the format for any other products. -->
<script src="https://www.gstatic.com/firebasejs/7.13.0/firebase-auth.js"></script>
<!-- etc. -->
I'm developing an app with react-native (v0.60) and I need push notifications. I decided to use firebase as service but I have an error during initialisation.
Code:
import {AppRegistry} from 'react-native';
import Config from 'react-native-config'
import * as firebase from 'firebase/app'
import '#firebase/messaging'
import firebaseConfig from 'App/src/firebase.config'
import App from './App';
import {name as appName} from './app.json';
firebase.initializeApp(firebaseConfig)
const messaging = firebase.messaging()
messaging.usePublicVapidKey(Config.FIREBASE_KEY_PAIR)
AppRegistry.registerComponent(appName, () => App);
The problem is that I get the error:
ReferenceError: Can't find variable: IDBIndex
How can I fix this?
firebase only supports Authentication, Firestore & Realtime databases, Storage, and Functions on React Native. Other modules like Analytics are not supported through the Firebase JS SDK, but you can use expo-firebase-analytics for that. If you'd like access to the full suite of native firebase tools
please remove firebase.analytics();
It's because you have enabled Google Analytics for your app. Disable Analytics from the Firebase settings and again copy the Firebase file data from Firebase and replace it with the old firebase.js file in the project.
I would advise to use the React Native Firebase wrapper instead. As they say:
Although some features from the Firebase Web SDK will generally work with React Native, it is mainly built for the web and as such has a limited compatible feature set. In contrast we use the Firebase Native SDKs - this allows us to provide APIs to a vast majority of Firebase products and services.
please remove firebase.analytics(); form where ?
I am using firebase within my Angular 6 application and when I use imports like the following,
import { auth, User } from 'firebase';
I get this warning in the browser console:
It looks like you're using the development build of the Firebase JS SDK.
When deploying Firebase apps to production, it is advisable to only import
the individual SDK components you intend to use.
For the module builds, these are available in the following manner
(replace <PACKAGE> with the name of a component - i.e. auth, database, etc):
CommonJS Modules:
const firebase = require('firebase/app');
require('firebase/<PACKAGE>');
ES Modules:
import firebase from 'firebase/app';
import 'firebase/<PACKAGE>';
Whenever I switch the imports to something like import * as auth from 'firebase/auth':
I get a different error: export 'GoogleAuthProvider' (imported as 'auth') was not found in 'firebase/auth' (because I am also using GoogleAuthProvider)
the auth variable doesn't have it's definition anymore and I can't CTRL-CLICK and see what is going on.
According to danfri86's comment to this GitHub issue - https://github.com/firebase/angularfire/issues/968 - you should do the following:
import firebase from 'firebase/app';
import 'firebase/auth'; // This line is important
export const googleProvider = new firebase.auth.GoogleAuthProvider();
This is in fact what the warning says to do:
ES Modules:
import firebase from 'firebase/app';
import 'firebase/<PACKAGE>';
I've just tested it and it doesn't throw any errors.
When application load in browser, it gives following warning. So unable to create build for prod (ng build --aot --prod)
It looks like you're using the development build of the Firebase JS SDK.
When deploying Firebase apps to production, it is advisable to only import
the individual SDK components you intend to use.
For the module builds, these are available in the following manner
(replace <PACKAGE> with the name of a component - i.e. auth, database, etc):
CommonJS Modules:
const firebase = require('firebase/app');
require('firebase/<PACKAGE>');
ES Modules:
import firebase from 'firebase/app';
import 'firebase/<PACKAGE>';
I am using following configurations
Angular CLI: 1.5.0
Node: 9.8.0
Angular: 5.1.3
"firebase": "^5.0.4",
"angularfire2": "^5.0.0-rc.10"
Please guide where I get wrong.
There is nothing really wrong, it is more a warning and a best practices tip.
Firebase is composed of different services/modules, e.g. the Real Time Database, Firestore, the Auth service, etc.
In the majority of projects one does not use ALL those services and therefore this warning indicates that instead of importing all the services with one global import it is better to only import the services you really need in your application. In such a way, your build will be optimized: the resulting build file(s) will only contain the Firebase SDK code that you need and will not contain the parts that are not used.
See this documentation item: https://firebase.google.com/docs/web/setup and in particular the part that says:
If you are using a bundler like Browserify or webpack, you can just
require() the components that you use.
Update following your comment:
With the import keyword, you should do as follows:
import messaging from 'firebase/messaging';
You did not share your Angular component code that's why I could not give you specific code. However, I guess, you include Firebase directly like this then it will show following warning.
import * as firebase from 'firebase'; // It will throw warning
import * as firebase from 'firebase/app'; // It will not throw any warning
Then include specific package acccording to your need.
import 'firebase/firestore';
import 'firebase/database';
import 'firebase/auth';
I add following code, it works for me
require("firebase/messaging");
I'm trying to import the core module from firebase but it looks like something is wrong with what I''m doing. Currently I'm importing it as:
import firebase from 'firebase'
With this in my app I do not get the app interface, however, if I do:
import firebase from 'firebase/app'
It does work but I'm missing all the other modules as the database modules, I could by pass it just by adding a couple more of imports but I'd like to import the full app since it's a simpler implementation
Thanks for the help!
Try with:
import firebase from 'firebase/firebase-browser'