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'
Related
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 found several answers here about how to fix this warning in my Vue app, but even when I follow the standard advice given I still get the warning. Here's how I import Firebase:
import firebase from 'firebase/app';
import 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
Any idea?
The warning about a development build is logged when you're using firebase.js, which includes the SDKs for all Firebase products in a single file.
If you're still getting that warning, you're very likely still using firebase.js in one of your files, or in a build artifact.
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");