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. -->
Related
What for should I link the web app to the Firebase Hosting site in the console? What are the benefits and effects?
The difference between the two is covered here: Whats the difference between firebase web app and firebase hosting.
The linking is mentioned in the documentation https://firebase.google.com/docs/web/setup#register-app, but the rationale and consequences are not explained.
The Firebase support documentation says:
You may need to link your web app to your Hosting site in the Project settings if you chose not to set up Hosting when you registered your web app with your Firebase project.
If you're using Firebase Hosting for your web app, you can use the reserved Hosting URLs to add Firebase SDKs and manage your Firebase configuration for your app.
In short, if you're using those special Hosting URLs that begin with __, in particular, /__/firebase/init.json, it helps to have linked your app to Hosting so that the configuration is complete. By my recollection, the config will then have a correct FCM config in this case.
You can configure partial import of the Firebase JavaScript SDK and only load the Firebase products that you need. If you're using a bundler (like Browserify or webpack), you can import individual Firebase products when you need them.
Note: You can use this option even if you use Firebase Hosting, but make sure to add your Firebase config object before initializing Firebase.
Install the Firebase JavaScript SDK:
a. If you don't already have a package.json file, create one by running the following command from the root of your JavaScript project:
npm init
b. Install the firebase npm package and save it to your package.json file by running:
npm install --save firebase
To include only specific Firebase products (like Authentication and Cloud Firestore), import Firebase modules:
// Firebase App (the core Firebase SDK) is always required and must be
listed first
import firebase from "firebase/app";
// If you are using v7 or any earlier version of the JS SDK, you should
import firebase using namespace import
// import * as firebase from "firebase/app"
// If you enabled Analytics in your project, add the Firebase SDK for
Analytics
import "firebase/analytics";
// Add the Firebase products that you want to use
import "firebase/auth";
import "firebase/firestore";
Initialize Firebase in your app:
// TODO: Replace the following with your app's Firebase project
configuration
// For Firebase JavaScript SDK v7.20.0 and later, measurementId is an
optional field
const firebaseConfig = {
// ...
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
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.
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");