I have initiated a FB SDK in the project following the documentation:
Getting started with Analytics is easy. Just add the Firebase SDK to your new or existing app, and data collection begins automatically. You can view analytics data in the Firebase console within hours.
Here is my main.js
// Production Firebase configuration
firebaseConfig = {
apiKey: <AKI_LEY>,
authDomain: <DOMAIN>,
databaseURL: <DB_URL>,
projectId: <PROJECT_ID>,
storageBucket: "",
messagingSenderId: <SENDER_ID>,
appId: <APP_ID>,
measurementId: <TRACKING_ID>
};
firebase.initializeApp(firebaseConfig);
// missing firebase.analytics(); but calling this in main will throw exception. Calling this in index.html will also throw exception as initializeApp has to be called before.
This allows the application to work with firebase Storage and Auth services but analytics is still not registering anything.
What am I missing?
EDIT
After reading more documentation and double checking my index, I added the following <scripts> but with no prevail.
<!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-app.js"></script>
<script src='https://www.gstatic.com/firebasejs/7.5.0/firebase-analytics.js'></script>
The problem
Default webpack firebase import doesn't have firebase analytics libraries, that's why you need to import using CDN.
After import in index I still need to run firebase.analytics() but that has to follow firebase.initializeApp().
How can one call both in the main.js so that firebase functions are not separated between index and main?
Also my main includes more logic to decide on the firebase config setup (have multiple projects) so I cannot just move all the firebase actions into index.html.
Thanks.
This was an issue with how the firebase library was structured. It was fixed in 7.1.0 and the analytics package is now included.
Link to firebase github issue.
Here is the summary how I got it working:
index.html
...
<body>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-analytics.js"></script>
...
main.js
import * as firebase from 'firebase/app';
...
firebase.initializeApp(firebaseConfig);
firebase.analytics();
...
This resulted in getting stats on firebase. It took 2 days for it to propagate.
For Analytics to work in your Firebase app, you'll need to include the SDK.
A common way to do this is with:
<script src='https://www.gstatic.com/firebasejs/7.5.0/firebase-analytics.js'>
But of course any other way of including the necessary file is fine too. Be sure to check what the latest version of the SDK is, under available libraries in the documentation.
I have both included, the codes are fine and no errors, but I can't find the analytics data in the dashboard and can't check the events I sent. Are you able to see this?
use cdn
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.7.1/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/8.7.1/firebase-analytics.js"></script>
or use import
npm install --save firebase
// 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";
init
// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
var 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",
};
docs
https://firebase.google.com/docs/web/setup
Related
I am developing a RN app in Expo with firebase as backend. So far, the app only uses firebase auth and firestore and for whatever reason, I randomly started getting the error of ReferenceError: Can't find variable: IDBIndex. I adjusted my firebase config to suit the v9 standards instead of using the compat package. I ensured my app was not using Google Analytics. I have also downgraded to firebase#9.1.0 which matches up with the expo documentation and this other similar post.
I have also git reverted into previous versions of the app (with earlier dependencies and code) when it was working but still got back the same error. When this occurred, I entirely reinstalled node and npm because I thought that was the only other possible reason this could be happening but that was to no avail as well (getting the same IDB error). I still think this is a firebase related issue, but I am pretty much all out of ideas as to what it could be.
Here is my firebase config:
import { initializeApp } from 'firebase/app'
import { getAuth, connectAuthEmulator } from "firebase/auth";
import { getFirestore, connectFirestoreEmulator } from "firebase/firestore";
import {
FIREBASE_API_KEY,
FIREBASE_AUTH_DOMAIN,
FIREBASE_PROJECT_ID,
FIREBASE_STORAGE_BUCKET,
FIREBASE_MESSAGING_SENDER_ID,
FIREBASE_APP_ID,
FIREBASE_MEASUREMENT_ID,
} from '#env';
const firebaseConfig = {
apiKey: FIREBASE_API_KEY,
authDomain: FIREBASE_AUTH_DOMAIN,
projectId: FIREBASE_PROJECT_ID,
storageBucket: FIREBASE_STORAGE_BUCKET,
messagingSenderId: FIREBASE_MESSAGING_SENDER_ID,
appId: FIREBASE_APP_ID,
measurementId: FIREBASE_MEASUREMENT_ID,
};
const app = initializeApp(firebaseConfig);
export default app;
export const auth = getAuth(app);
export const firestore = getFirestore(app);
if (process.env.NODE_ENV === "development") {
connectAuthEmulator(auth, "http://localhost:9099");
connectFirestoreEmulator(firestore, "localhost", 8080);
}
Do let me know if you need to see more files or need to know more details.
firebaser here
There was a problem in our JavaScript SDKs, where Firebase Installation Services used a version of IDB that doesn't support ESM outside of browser environments. The issue has been fixed in version 9.6.9 of the JavaScript SDK, so be sure to update to that.
I'm getting the same issue, looks like, it's breaking on "firebase": "^9.6.8", which was released a few days ago. Use "firebase": "9.6.7",
I've been getting the same issue, I've tried all the same things as you to no avail. I symbolicated the logs from firebase test lab and came up with this:
Stacktrace
Generally I have no idea how all of these libraries work together, but are you using typesense with firestore? I wonder if your stack trace calls out the same files, but I can't find any smoking gun here. I'll keep updating this thread if I find something. (I would have commented but I don't have the rep yet)
Update: Looks like my build just fixed itself somehow, even submitting builds from this weekend that would constantly crash. So truly I'm not sure what happened but it may be resolved
I had the same issue, my solution was to downgrade the Firebase version from 9.6.8 to 8.2.3.
Here is a reference that could be helpful.
https://github.com/expo/expo-cli/issues/3066
I had this same issue, and after trying multiple different firebase versions, this is the one that fixed the error for me:
npm install firebase#9.4.1 --save
Here's where I found this: Get Started with Cloud Firestore
The other fixes mentioned in this thread are definitely all valid (I have seen other forum posts suggesting the firebase downgrade but in my case it did not work.)
I thought it could be helpful for me to confirm what fixed the problem in my case. The problem arose from when one of my team members used npm instead of expo (which defaults to yarn) to install a dependency. This caused syncing issues between the yarn.lock and package-lock.json. This alone wouldn't have caused much of an issue because a simple yarn or yarn install <dependency> would have solved the issue. However, this dependency happened to require pre-existing dependencies which were of a different version then the ones "expected" by my version of expo. How this IDBIndex error was triggered is still a mystery to me, but in the end all I had to do was remove all my lock files and node_modules, perform an expo updateand finally do a yarn to reinstall all now-compatible packages.
If anyone stumbling across this answer can give a possible explanation as to why this fixed things, that would be much appreciated.
Here is what worked for me (using yarn):
deleted node_modules
deleted yarn.lock
downgraded to firebase "9.6.7" yarn add firebase#9.6.7
downloaded packages using yarn install
made sure all my imports are from the correct firebase library. I am using expo, and I had imported both firebase and react-native-firebase, which was causing trouble. I deleted react-native-firebase for now until I eject if needed.
Fixed my imports. Now you import firebase like this import firebase from "firebase/compat"
if you use firebase analytics, remove it
firebase version "firebase": "9.6.7"
import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
// import { getAnalytics } from "firebase/analytics";
const firebaseConfig = {
apiKey: process.env.FIREBASE_APP_KEY,
authDomain: process.env.FIREBASE_AUTH_DOMAIN,
projectId: process.env.FIREBASE_PROJECT_ID,
storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
appId: process.env.FIREBASE_APP_ID,
measurementId: process.env.FIREBASE_MEASUREMENT_ID,
};
export const app = initializeApp(firebaseConfig);
// export const analytics = getAnalytics(app);
export const firestore = getFirestore(app);
Had the same issue, I just downgraded firebase version and it worked.
you can use this code for downgrading:
npm install firebase#9.4.1 --save
This worked for Expo:
https://github.com/firebase/firebase-js-sdk/issues/6253#issuecomment-1123923581
// metro.config.js
const { getDefaultConfig } = require("#expo/metro-config");
const defaultConfig = getDefaultConfig(__dirname);
defaultConfig.resolver.assetExts.push("cjs");
module.exports = defaultConfig;
Im trying to make a database call/post but im getting the error
functions.js:7 Uncaught ReferenceError: firebase is not defined
From my research it is my understanding that 'firebase' is defined in the firebase.js script file that is imported using the CDN code from the setting panel in Firebase..
But all the help pages i find are from 2014-2017 and version 9 of Firebase uses a completely different import language.. These pages are no help to me..
I am using the standard
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.1.3/firebase-app.js";
Am I right in thinking that because this import is happening (and its seemingly is - firebase-app.js is showing up in the inspector) That firebase should be defined...
Or is firebase defined somewhere else and im missing something??
If this is the case where is firebase defined and how do i import it (with V9 Firebase)
Thanks
Edit: Im doing this all through a tutorial I found on Youtube, its from 2019.. Is it possible that calling upon 'firebase' now is outmoded and that is what I am having these troubles? Or should i expect it to work and keep trying to find a solution?
In v8 and older versions of the Firebase Web SDK, now referred to as the "namespaced SDK", the SDK would add methods and types to a global object called firebase. You will see a lot of existing tutorials with code that looks like firebase.initializeApp(), firebase.database() and firebase.firestore.FieldValue.increment(). All of these calls will not work in the newer versions of the Firebase Web SDK.
In v9 and later versions of the Firebase Web SDK, now referred to as the "modular SDK", the SDK undertook a major architectural revamp and introduced lots of breaking changes. The primary change with the new version is that the firebase global object was completely removed and every method and type is now exported independently. When using this new SDK with a build tool like Webpack or Rollup, it can "shake the tree" to loosen and remove all of the bits of code that you don't actually use in your code from the final build.
As an example, if you don't use any of the FieldValue transforms in your code (like increment(), serverTimestamp() and arrayUnion()) they won't be included in your final build saving you and your users resources and time.
Not sure how you are using the script files, but have u defined them as "modules" in you html like:
and have you initialized firebase from your app:
const firebaseConfig = {
YOU_FIREBASE_CONFIG
}
const app = initializeApp(firebaseConfig)
The difference between v8 and v9 of firebase is a well-known error these days.
I am not sure this could be the exact solution, but at least as a hint.
Using compat is a way to solve.
Based in the firebase document below.
import firebase from 'firebase/compat/app';
↑would be how to import.....
Upgrade from version 8 to the modular Web SDK
When you run this code:
import { initializeApp } from ...
This code imports only the initializeApp function, and nothing else. That's precisely its point, because by using these very granular imports, bundler tools (like webpack) are able to drop any part of the Firebase SDK that you are not using from their output, resulting in a significantly smaller app.
So when you run that import, there is no top-level firebase namespace anymore. To access the Realtime Database, you'd instead use:
import { initializeApp } from 'firebase/app';
import { getDatabase } from "firebase/database";
// Set the configuration for your app
// TODO: Replace with your project's config object
const firebaseConfig = {
apiKey: "apiKey",
authDomain: "projectId.firebaseapp.com",
databaseURL: "https://databaseName.firebaseio.com",
storageBucket: "bucket.appspot.com"
};
const app = initializeApp(firebaseConfig);
// Get a reference to the database service
const database = getDatabase(app); // 👈 Get the database instance
This is shown in the documentation on initializing the Realtime Database JavaScript SDK, so I recommend keeping that handy.
If you're following a tutorial or documentation from elsewhere, it likely hasn't been updated to the new modular syntax yet. You can also use the compat mode of the new SDK in that case, as user K Lee pointed out in their answer.
After a while I realized that all your Javascript code has to be run within the SDK module tags that you import from the Firebase Dashboard...
If your Javascript is not run within the <script type="module"> tags from the imported Firebase code the imported modules from Firebase's modular SDK wont be defined.
Also I was trying to go through a tutorial that was from V5 of Firebase and was running into problems there as well.
In my reactjs project I have installed firebase using 'npm i firebase'. And inside of src folder I have created firebase.js file for firebase config.
import firebase from 'firebase'
const firebaseConfig = {
apiKey: "******",
authDomain: "****",
projectId: "***",
storageBucket: "*****",
messagingSenderId: "****",
appId: "****"
};
firebase.initializeApp(config);
export default firebase
Even after installing firebase in my project. It gives error:
./src/firebase.js
Module not found: Can't resolve 'firebase' in '/home/rupak/Projects/web/firebasereact/src'
Can anyone find the problem?
You are not using the new Modular syntax. You can keep using existing code by changing the imports to compat version:
import firebase from 'firebase/compat/app'
import 'firebase/firestore'
// import 'firebase/[SERVICE_NAME]'
However, I'd recommend upgrading to the new Modular SDK, which offers some benefits with tree-shaking. Checkout this Firecast for detailed information:
Getting started with Firebase for Web
Refer Firebase docs if you are using newer version initializeApp is moved to firebase/app package
Hey I had the same situation stated above...
But by applying this:
import firebase from 'firebase/compat/app'
import 'firebase/firestore'
// import 'firebase/[SERVICE_NAME]'
//export
export const auth = firebase.auth();
export const googleAuthProvider = new firebase.auth.GoogleAuthProvider();
I only removed the (/app), and it worked... THANK YOU
I have faced the same issue, It seems firebase 9.17.0 just dropped.
Rolling back to the 9.16.0 solved the problem.
for yarn package:
yarn add firebase#9.16.0
for npm:
npm i firebase#9.16.0
Now check your package.json file looks like this.
"firebase": "9.16.0",
I am trying to deploy my react web app to Firebase. I have a github workflow setup in order to deploy to a preview channel when pull request is created, and then when it is merged it will deploy that to be live. I have my firebase api key and other details stored in a .env file, which is in my .gitignore as to not check that into the git repository. However, these variables are not being used when the app is deployed to firebase. A blank page is displayed and an error in the console saying that an incorrect API key is being used and to please use correct api key. However, if I hardcode the exact same value into the config for firebase directly, it works without any issue. Any ideas on how to fix this? The .env example and how I am using it is below. (without the actual values in .env file of course). Also, the .env file is in the root of the project as well.
.env sample:
REACT_APP_API_KEY={{value}}
REACT_APP_AUTH_DOMAIN={{value}}
REACT_APP_DATABASE_URL={{value}}
REACT_APP_PROJECT_ID={{value}}
REACT_APP_STORAGE_BUCKET={{value}}
REACT_APP_MESSAGING_SENDER_ID={{value}}
firebase.js
const config = {
apiKey: process.env.REACT_APP_API_KEY,
authDomain: process.env.REACT_APP_AUTH_DOMAIN,
databaseURL: process.env.REACT_APP_DATABASE_URL,
projectId: process.env.REACT_APP_PROJECT_ID,
storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
};
I think that you should add .production at the end of the .env filename. It becomes .env.production,then build and deploy.
I used a firebase package for using realtime DB and I want to implement firebase analytics so I used the same package and write code for analytics
import * as firebase from 'firebase'
import 'firebase/analytics'
import { fireBase } from 'configs/config'
const config = {
apiKey: fireBase.REACT_APP_FIREBASE_API_KEY,
authDomain: fireBase.REACT_APP_FIREBASE_AUTH_DOMAIN,
databaseURL: fireBase.REACT_APP_FIREBASE_DATABASE_URL,
projectId: fireBase.REACT_APP_FIREBASE_PROJECT_ID,
storageBucket: fireBase.REACT_APP_FIREBASE_STORAGE_BUCKET,
messagingSenderId: fireBase.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
appId: fireBase.REACT_APP_FIREBASE_APP_ID,
measurementId: fireBase.REACT_APP_MEASUREMENT_ID,
}
firebase.initializeApp(config)
export const defaultAnalytics = firebase.analytics()
export default firebase
after that, I imported defaultAnalytics in the file where I needed it and put that code to log the event for analytic purposes
defaultAnalytics.logEvent('profile_update')
It is working in development perfectly but not working in the production mode
There is issue like in electron, When we run app in development mode it will log firebase event easily because the app is run on localhost:3000 so a event will work.
But when we create a build for mac/windows it will not log the event because firebase package work when a build run on http protocol and our electron app production build run a file:// protocol.
So here we have to use Measurement Protocol, In that we need to create a separate property in firebase app.
Steps for creating a property:
Go to analytics.google.com then create a firebase app.
click on Create property and choose website option.
The provide a website URl and name of property name.
After the you will get a tracking info.In that a tracking code will be available.
Then use universal-analytics in main Processes.
Here is the complete implementation.
https://kilianvalkhof.com/2018/apps/using-google-analytics-to-gather-usage-statistics-in-electron/