import * as firebase from 'firebase'
import 'firebase/firestore'
import config from './config'
export const firebaseApp = firebase.initializeApp(config)
export const firestore = firebaseApp.firestore()
I've been battling this for the past 24hrs, I got solutions to import the firebase/firestore, but still none seems to work for me.
init.js?9adc:10 Uncaught TypeError: firebaseApp.firestore is not a function
at eval (init.js?9adc:10)
at Object.<anonymous> (renderer.js:1309)
at __webpack_require__ (renderer.js:680)
at fn (renderer.js:90)
at eval (199:3)
at Object.<anonymous> (renderer.js:2035)
at __webpack_require__ (renderer.js:680)
at fn (renderer.js:90)
at eval (CustomersTable.vue?2194:1)
at Object.<anonymous> (renderer.js:2022)
npm install --save #firebase/firestore
fixed this for me. It broke somewhere between firebase versions 4.5.0 and 4.8.0.
To access the firebase service,
import * as firebase from 'firebase'
import 'firebase/firestore'
import config from './config'
export const firebaseApp = firebase.initializeApp(config)
export const firestore = firebase.firestore()
Related
this is firebase import
import firebase from "firebase/app";
const db = firebase
.initializeApp({ projectId: process.env.VUE_APP_FIREBASE_PROJECT_ID })
.firestore();
and I'm getting a message back that Property 'firestore' does not exist on type 'FirebaseApp
I'm getting an error when I initialize the AppCheck in my project.
Firebase version: "^8.8.1".
Here is my configuration file:
import firebase from "firebase/app";
import "firebase/functions";
const firebaseConfig = {
apiKey: "--",
authDomain: "--",
projectId: "--",
storageBucket: "--",
messagingSenderId: "--",
appId: "--"
};
const check = firebase.appCheck() // here is the error
check.activate('appCheckKey', true)
const app = firebase.initializeApp(firebaseConfig)
const functions = firebase.functions()
export {
app,
functions
}
Note that I'm using dummy data here since keys are sensitive information.
This is the error that I get from Webpack:
firebase.js?dc59:13 Uncaught TypeError: firebase_app__WEBPACK_IMPORTED_MODULE_0__.default.appCheck is not a function
at eval (firebase.js?dc59:13)
at Module../src/firebase.js (app.js:1173)
at __webpack_require__ (app.js:849)
at fn (app.js:151)
at eval (SorteoForm.vue?0e40:55)
at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader-v16/dist/index.js?!./src/components/SorteoForm.vue?vue&type=script&lang=js (app.js:938)
at __webpack_require__ (app.js:849)
at fn (app.js:151)
at eval (SorteoForm.vue?a886:1)
at Module../src/components/SorteoForm.vue?vue&type=script&lang=js (app.js:1149)
Any idea what could be?
Thanks!
You need to import app check similar to Firestore and functions.
import firebase from "firebase/app";
import "firebase/functions";
import 'firebase/app-check';
// Import app-check ^
const check = firebase.appCheck();
check.activate('appCheckKey', true);
As you are using version 8 (namespaced) - add this to your head as a script tag:
https://www.gstatic.com/firebasejs/8.10.0/firebase-app-check.js
I struggle with the correct import of the firebase SDK. I use Vue3 and installed firebase via yarn add firebase
This is my firebase.js file:
import firebase from 'firebase/app';
However, this results in the following error: 1:1 error 'firebase/app' should be listed in the project's dependencies. Run 'npm i -S firebase/app' to add it import/no-extraneous-dependencies
import firebase from 'firebase';
This works, but I get the follwing warning:
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';
So, first way seems to be recommended, but it does not work out for me. What am I doing wrong?
Update: This seems to be fixed in v2.23.4 (eslint-plugin-import).
Original answer: You're not doing anything wrong. This is a bug, probably related to the package definition in firebase, but it's discussed here inside the eslint rule's repo: https://github.com/benmosher/eslint-plugin-import/issues/2065
You either can use a comment to stop the error from occurring like so:
// eslint-disable-next-line import/no-extraneous-dependencies
import firebase from 'firebase/app';
Or you'll have to wait for the issue to be resolved. Downgrading to v2.22.1 of eslint-plugin-import might also work.
You need to create a config file for firebase and importing firebase here. Then, you
register the module you need and exported it so other file can use it as well.
import firebase from "firebase/app";
import "firebase/firestore";
import "firebase/auth";
import "firebase/storage";
const firebaseConfig = {
// you can get this from your firebase console.
apiKey: "",
authDomain: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: "",
};
// init firebase
firebase.initializeApp(firebaseConfig);
// init services
const projectFirestore = firebase.firestore();
const projectAuth = firebase.auth();
const projectStorage = firebase.storage();
export { projectFirestore, projectAuth, projectStorage };
On your other file where you want to use your firebase, you could do something like this to import it.
import { projectAuth } from '../firebase/config'
const user = ref(projectAuth.currentUser)
I keep getting this error while trying to a access a firestore collection
Here's my firebase config
import Firebase from "firebase";
import "firebase/auth";
import "firebase/firestore";
let config = {
apiKey: "xxx",
authDomain: "xxx.firebaseapp.com",
databaseURL: "https://xxx.firebaseio.com",
projectId: "xxx",
storageBucket: "xxx.appspot.com",
messagingSenderId: "xxx",
};
let fb = Firebase.initializeApp(config);
let firestore = fb.firestore();
export const db = firestore;
export const auth = fb.auth();
export const firebase = fb;
Import and usage in a component:
import { db } from "./src/plugins/firebase";
db.collection("collection")
.doc(docId)
.collection("subcollection")
.doc(subdocId).set({
some object
})
I've seen similar issues like in: Type Error undefined is not an object (evaluating 'Wu.getRandomValues')
So I downgraded firebase to 7.9.0 but it didn't fix it...
Also this is only happening when running react-native bundle with option --dev false, if --dev true I don't get the error...
I finally made it work... I've tried everything removing firebase deleting package-lock.json clear npm cache and reinstalling firebase#7.8.2 but none of those worked... What worked was switching to Yarn instead of npm... so I just did a yarn add firebase#7.8.2 and it's up and running again.
I have recently discovered the Firebase callable functions which allows me to call HTTPS trigger like function from the client side (and with auth() support).
I struggle to implement this new feature in my already existing Firebase web-client application.
I have some cloud functions running, among them are some HTTPS functions I would like to transform into an HTTPS callable function (with functions.https.onCall).
The documentation indicates:
Set up your client development environment
<script src="https://www.gstatic.com/firebasejs/4.12.0/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.12.0/firebase-functions.js"></script>
And my code is:
import firebase from 'firebase';
import 'firebase/firestore';
const firebaseApp = firebase.initializeApp({
apiKey: '....',
authDomain: '....',
databaseURL: '....',
projectId: '....',
storageBucket: '....',
messagingSenderId: '....',
});
const db = firebaseApp.firestore();
const auth = firebaseApp.auth();
const functions = firebaseApp.functions();
export { db, auth, functions };
When I run my app, I got the following error:
Uncaught TypeError: firebaseApp.functions is not a function
I have tried yarn add firebase-functions and then import 'firebase-functions but then the app requires firebase-admin. I am affraid it is too much for a client-app so I might go in the wrong direction.
Can someone help me with this issue?
(!) This issue is NOT about the server-side Firebase SDK for Cloud Functions (Node JS). It is about calling Cloud functions directly from a Firebase web app.
Thank you!
UPDATE:
Thanks to #Andrew's post, this solves my issue:
My configuration
import firebase from 'firebase';
import 'firebase/firestore';
import '#firebase/functions';
import firestoreConfig from '#/config/firestore';
const firebaseApp = firebase.initializeApp(firestoreConfig /* The JSON configuration from my Firebase project */);
const db = firebaseApp.firestore();
const auth = firebaseApp.auth();
const functions = firebaseApp.functions();
export { db, auth, functions };
Using the configuration:
import { db, functions } from '#/database/firestoreInit';
export default {
addMessage(text) {
const addMessage = functions.httpsCallable('addMessage');
return addMessage({ text }).then(result => result);
},
}
I just ran into this same problem myself and solved it by installing and importing the #firebase/functions npm package. I found the solution on github here:
https://github.com/firebase/firebase-js-sdk/blob/master/packages/functions/README.md
From the README on github:
ES Modules
import firebase from '#firebase/app';
import '#firebase/functions'
// Do stuff w/ `firebase` and `firebase.functions`
CommonJS Modules
const firebase = require('#firebase/app').default;
require('#firebase/functions');
// Do stuff with `firebase` and `firebase.functions`
Hope that helps! The actual documentation is not very clear about having to do this in order to call the functions.
About #firebase/functions:
This package is not intended for direct usage, and should only be used via the officially supported firebase package.
This worked for me:
import * as firebase from 'firebase/app'; // Typescript
// import firebase from 'firebase/app'; // JS
import 'firebase/functions';
const myCallableFunc = firebase.functions().httpsCallable('myCallableFunc');
I don't know about importing firebase-functions with a CDN but if you're using npm then you don't need the firebase-functions package, just installing firebase will do.
Follow the steps mentioned here. Firebase cloud functions
I think there is nothing like firebaseApp.functions.