I had a working ReactJS app that was using Firebase.
I am following Robin Wieruch's React/Redux/Firebase Tutorial.
I then added Firebase functions, and now my app fails to start. The error I get is, for example, app.database() is not a function when instantiating the Firebase Class.
Here is a brief snippet:
import app from 'firebase/app';
import 'firebase/auth';
import 'firebase/database';
import 'firebase/storage'
import config from './config'
class Firebase {
constructor() {
app.initializeApp(config);
/* Helper */
this.serverValue = app.database.ServerValue;
this.emailAuthProvider = app.auth.EmailAuthProvider;
/* Firebase APIs */
this.auth = app.auth();
this.db = app.database();
}
I have the app working in the old repository without functions, so the only thing I can figure is that adding Firebase functions has introduced some conflict.
The directory structure is:
src/
node_modules/
functions/
functions/node_modules/
Any thoughts?
Thanks!
Only a guess... Is it possible that you need to import functions, and this.functions = app.functions() as you have with db and auth?
Related
I am building a react app (this part might be inconsequential) and have a server cloud function built:
exports.myFunction = functions.https.onCall(async (data, context) => {
...
}
I know that calling this in my client would normally consist of calling
firebase.functions().httpsCallable('myFunction');
And I have tried this in a separate project, and it works. However, that was using a script tag to import the functions module in my index.html:
<script src="/__/firebase/7.7.9/firebase-functions.js"></script>
but in my current project, my modules are imported in my firebase.js source:
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
const firebaseConfig = {
apiKey: ...
...
};
const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
I wasn't able to find any example code for importing functions this way, and everything I have tried has failed.
How can I import functions so that I can invoke the above method? Even better, how could I figure this out on my own? (I have been relying on example code so far). I assume that these are referencing the NPM packages I have npm install'ed (or in my case, yarn add'ed), but I don't immediately see where the code is actually being referenced so I can work this out on my own.
As far what I have understood from you question it is regarding how can firebase cloud function module be imported while using a react app which is calling a HTTPS callable function at the client side.You can use any library or built-in command of your environment to call a HTTPS function.
I would recommend you to try the following to your imports and see if that works.
import { getFunctions, httpsCallable } from "firebase/functions";
OR
import * as functions from 'firebase-functions'; import React from 'react'; import { renderToString } from 'react-dom/server'; import App from './src/App';
Check the below for similar implementation examples to better understand this and implement according to your requirements.
How to call Firebase function from within react component
Call Firebase HTTPS callable function in react
Implement callable function in react app
Firebase callable function CORS
I'm trying to create a signup page using react with firebase for the backend and this is the error in the console.
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>';
Typescript:
import firebase from 'firebase/app';
import 'firebase/<PACKAGE>';```
To simplify it, when you use require("firebase"); or import firebase from "firebase";, you import EVERYTHING. More often than not you don't use every library listed below.
For testing, importing from the root package "firebase" is fine, but when you deploy to production/compile your app, you shouldn't use it - which is what this error is saying.
Remember: Import what you need and don't import what you don't.
import firebase from "firebase";
is effectively the same as
import firebase from "firebase/app"; // Analytics
import "firebase/analytics"; // Analytics
import "firebase/auth" // Authentication
import "firebase/firestore" // Cloud Firestore
import "firebase/functions" // Cloud Functions for Firebase Client SDK
import "firebase/messaging" // Cloud Messaging
import "firebase/storage" // Cloud Storage
import "firebase/performance" // Performance Monitoring
import "firebase/database" // Realtime Database
import "firebase/remoteConfig" // Remote Config
In most cases for React, you want to import from the React Native Firebase (RNFB) packages like "#react-native-firebase/app", "#react-native-firebase/database" and so on.
To get access to the underlying firebase library for the RNFB libs, you would use:
import firebase from "#react-native-firebase/app";
// or
import database, { firebase } from "#react-native-firebase/database";
I am using Firebase in a React web app and I need to use firebase.firestore.FieldValue.serverTimestamp() and some other methods.
However to get a firebase reference I import import * as firebase from "firebase";
Doing this import gives me the following console 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';
import 'firebase/<PACKAGE>';
Typescript:
import * as firebase from 'firebase/app';
import 'firebase/<PACKAGE>';
How can I import firebase.firestore.FieldValue.serverTimestamp() without importing the whole firebase library?
Installing the following package:
https://www.npmjs.com/package/#firebase/firestore
Then you can do:
import firebase from '#firebase/app';
import '#firebase/firestore'
I'm attempting to combine implicit initialization for Firebase and a React app (created using CRA) as it seems like a good way to ensure I don't need to worry too much about configuring for different environments.
However, when running the app, if I make any attempt to use the firebase object I get the error Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).
My index file has the Firebase files included before the app files and if I put a breakpoint in the Firebase-provided init then I can see that it is initializing the firebase object.
The App component is the one that comes with the CRA boilerplate:
mport React from 'react';
import firebase from 'firebase/app'
import 'firebase/functions'
import logo from './logo.svg';
import './App.css';
const App: React.FC = () => {
const helloWorld = firebase.functions().httpsCallable('helloWorld')
helloWorld().then(result => console.log({ result }))
return (
...
Any pointers?
I was doing it wrong. The init script was being called correctly and creating a global firebase object, which I was then overriding with my imports.
I removed the two imports in my component and changed the helloWorld declaration:
const helloWorld = window.firebase.functions().httpsCallable('helloWorld')
The typescript linter then complains that firebase doesn't exist on Window, so I've added a global.d.ts file containing this:
interface Window {
firebase: any
}
At some point, I'll work out the correct type for it, but it's got me past the problem.
I'm having issues adding authentication to an app I have been working on.
Everything works fine with firebase as-is without the auth, until I start adding these new lines, which are basically just:
export const provider = new firebase.auth.GoogleAuthProvider();
export const auth = firebase.auth();
import firebase, { auth, provider } from './firebase.js';
I have a file for my config (config.js), which just contains an export for DB_CONFIG (with all my correct info). Here's where I'm running into issues. The tutorial I'm following has firebase imported and initialized in the config file, while I am doing so in my App.js file. I've been trying different things for a couple hours and nothing is working for me. If I import firebase into my config and initializeApp there, it breaks my App.js. Here's a gist of my code vs. what I'm trying to follow.
Is there an easy way to get the auth and provider set up and imported into my App.js file without changing too much?
After looking at your code I made some changes to it, maybe this approach help?
import * as firebase from 'firebase'
import { DB_CONFIG } from './Config/config';
// Configure firebase and it will be available globally.
firebase.initializeApp(DB_CONFIG)
// Once initialized you just need to create the provider and auth
const provider = new firebase.auth.GoogleAuthProvider();
const auth = firebase.auth();
class App extends Component {
constructor(props){
super(props);
// And just call firebase.database() to access database functionality.
// You don't even need to assign it to a local variable as you can access
// it anywhere in your code just by importing firebase
// and calling firebase.database() and also firebase.auth()
this.databaseRef = firebase.database().ref().child('players');
}
}
PS: I would delete your gist because, even though you changed the config file, your configuration info is still available in the gist revisions...