I have imported firebase like this,
import * as firebase from 'firebase';
const config = {
};
firebase.initializeApp(config);
export const database = firebase.database().ref('/posts');
Then I got this error:
__WEBPACK_IMPORTED_MODULE_0_firebase_app__.database is not a function
so I tried this way.
const firebase = require('firebase/app');
require('firebase/auth');
require('firebase/database');
Then I got this error.
firebase.initializeApp is not a function
Does anyone know how to work with server side rendered react with webpack, firebase ?
Thanks.
instead of
export const database = firebase.database().ref('/posts')
try :
const database = firebase.database().ref('/posts')
module.exports = database
Related
I am using Next.js to fetch data from my Firestore Database, but I keep getting an error in the console, stating that GET (FirestoreDatabaseURL) 404 (not found).
When I try any other json database such as myfakestore or jsonplaceholder, my code works (I tried both getServerSideProps and fetching with UseState), works beautifully. But not from my own database. Tried with Postman, but it won't work either.
I have tried to find different ways to get the database URL, but I am only finding this one format:
https://PROJECTID.firebaseio.com
The server is in us-central, which also helps determine the URL.
While testing around, I have gotten the error FetchError: invalid json response body at https://PROJECTID.firebaseio.com/ reason: Unexpected token F in JSON at position 0
Which I came to find out that it's not actually returning json, but HTML.
Just for context, this is my working code:
const [showProducts, setShowProducts] = useState()
const apiData = 'https://celeste-73695.firebaseio.com/'
let displayProducts
function pullJson () {
fetch(apiData)
.then(response => response.json())
.then(responseData => {
displayProducts = responseData.map(function(product){
return (
<p key={product.id}>{product.title}</p>
)
})
console.log(responseData)
setShowProducts(displayProducts)
})
//return
}
useEffect(() => {
pullJson()
},[])
And my firebase.js file
import firebase from 'firebase';
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "***",
authDomain: "***",
projectId: "***",
storageBucket: "***",
messagingSenderId: "***",
appId: "***",
measurementId: "***"
};
const app = !firebase.apps.length
? firebase.initializeApp(firebaseConfig)
: firebase.app();
const db = app.firestore();
export default db;
Can anybody point me in the right direction?
Thanks in advance.
The databaseURL property is for the Firebase Realtime Database, which you probably didn't create yet. The databaseURL property is not necessary to use Firestore though, so you should be able to access that with just the configuration data you have.
You may have created the realtime database but not have configured it with firebase config. I recommend you to go through this documentations for the realtime database.
To configure the firebase firestore you need to do the following:
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
const firebaseConfig = {
// ...
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
// Initialize Cloud Firestore and get a reference to the service
const db = getFirestore(app);
And make sure to export the db reference as will be used in your project.
After that you can start using the firestore like documented here as you have tried to use it with URL you may have to change the implementation for using it like shown in above documentations
I have been trying to get firebase functions to work for a day but failing miserably.
I have set up a http cloud function from the google cloud functions inline editor with code:
const admin = require('firebase-admin');
const functions = require('firebase-functions')
admin.initializeApp();
const db = admin.firestore();
exports.account_create_callable = functions.https.onCall((data,context) => {
var docRef = db.collection('users').doc(context.auth.uid)
docRef.set(
{
createdAt:Date.now(),
}, { merge: true }
);
return
})
I'm using React and there is very limited documentation but I've put together what I think is correct:
import firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";
import "firebase/functions";
const firebase = firebase.initializeApp({
apiKey: process.env.REACT_APP_FB_API_KEY,
authDomain: process.env.REACT_APP_FB_AUTH_DOMAIN,
projectId: process.env.REACT_APP_FB_PROJECT_ID,
});
const firestore = firebase.firestore();
// require('firebase-functions'); // I saw this is some documentation but don't think it's needed?
const functions = firebase.functions()
export function createUser(uid, data) {
const account_create_callable = functions().httpsCallable('account_create_callable')
account_create_callable()
}
However when I run this code, I get an internal error shown in the browser console.
Error: internal
at new HttpsErrorImpl (error.ts:65)
at _errorForResponse (error.ts:175)
at Service.<anonymous> (service.ts:276)
at step (tslib.es6.js:100)
at Object.next (tslib.es6.js:81)
at fulfilled (tslib.es6.js:71)
Interestingly, I get the same error when I call a non existent function like so:
functions().httpsCallable('asdf')
Would appreciate if someone could let me know where I'm going wrong.
My Firebase SDK is up to date.
I set up the function in the inline editor and set my region to eu-west 2, would this have any effect on my client code?
Since your Callable Function is deployed on europe-west2, you must initialize your client SDK with the appropriate region:
var functions = firebase.app().functions('europe-west2');
See https://firebase.google.com/docs/functions/locations#client-side_location_selection_for_callable_functions.
I can't call the firebase.firestore().settings() function as I'm getting some "requires its first argument to be of type object" error:
firebase.firestore().settings({ timestampsInSnapshots: true })
I don't understand this error, but as a workaround I tried to create an object thus:
const firestoreSettings = Object.create({ timestampsInSnapshots: true })
firebase.firestore().settings(firestoreSettings)
This didn't work either.
Where does this error come from and how to solve it?
you are confusing the namespaces; this should do the trick
import firebase from 'firebase/app'
if (!firebase.apps.length) {
firebase.initializeApp(YOUR_CONFIG_OBJECT_GOES_HERE)
}
const firestore = firebase.firestore()
const settings = { timestampsInSnapshots: true }
firestore.settings(settings) // notice it is firestore instead of firestore()
PD: This is not required anymore... try updating your sdk version to the last one :)
The following should do the trick:
import firebase from 'firebase/app';
import 'firebase/firestore';
const config = {
apiKey: 'xxxxxxxxx',
authDomain: 'xxxxxxxxx',
......
};
firebase.initializeApp(config);
const db = firebase.firestore();
const settings = {
timestampsInSnapshots: true
};
db.settings(settings);
//....
As indicated in the other answer, note that you don't need use the timestampsInSnapshots setting anymore, see https://firebase.google.com/docs/reference/js/firebase.firestore.Settings#optional-timestamps-insnapshots
I noticed that this issue was tagged with nuxt.js. I came across this issue recently when initializing firestore with settings in a Nuxt app. I solved the issue by making sure that firestore().settings() was only called client side - not server side.
I made a service in my React Native Expo Snack app that handles the instantiation of different firebase services. Somehow, Snack isn't able to find firestore, as it says "_firebase.default.firestore is not a function". The code used is shows below:
import firebase, { firestore } from 'firebase';
const config = { ... // Deleted, assume the config is correct }
export const FirebaseApp = !firebase.apps.length ? firebase.initializeApp(config) : firebase.app();
export const Firestore = firebase.firestore();
export const Auth = firebase.auth();
Can somebody confirm this should work in Snack? Why doesn't it recognize firestore() as a function?
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.