I created the configurations with firebase functions:config:set but when I try to access them I get an error:
import firebase from 'firebase';
import functions from 'firebase-functions';
import admin from 'firebase-admin';
admin.initializeApp(functions.config().firebase);
const config = {
apiKey: functions.config().todoservice.apikey,
....
};
const fire = firebase.initializeApp(config)
export { fire }
That's what the documentation recommends.
The todoservice that I am trying to access does exist.
But when I npm run build I get the following error
Module not found: Error: Can't resolve 'dns' in '/www/firebase-app/node_modules/isemail/lib'
Based on research I tried using few different versions of firebase-admin and firebase-functions but nothing seems to work.
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 have git clone a React+ Firebase project.
When launching the project, I get this error:
Server Error
FirebaseError: Firebase Storage: No default bucket found. Did you set the 'storageBucket' property when initializing the app? (storage/no-default-bucket)
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Have you put your bucket URL on your app?
Reference:
Google Storage Jacascript
import { initializeApp } from "firebase/app";
import { getStorage } from "firebase/storage";
// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
// ...
storageBucket: ''
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
// Initialize Cloud Storage and get a reference to the service
const storage = getStorage(app);
I've got a simple create-react-app going, have firebase (^9.1.1) npm package installed, and am trying to get up and running (this is my first go with Firebase - I have no idea what I'm doing...)
import { initializeApp } from "firebase/app";
import { getFirestore } from 'firebase/firestore';
const config = {
...
}
export const firestoreApp = initializeApp(config)
export const db = getFirestore(firestoreApp)
console.log(db.name)
When webpack works its magic, I get the following error
Failed to compile.
./node_modules/firebase/firebase-firestore.js
Module not found: Can't resolve 'https://www.gstatic.com/firebasejs/9.1.1/firebase-app.js' in '/Users/<user>/git/<project>/node_modules/firebase'
Looking at the file, the top has an import from a URL import { _registerComponent, registerVersion, _getProvider, getApp, _removeServiceInstance, SDK_VERSION } from 'https://www.gstatic.com/firebasejs/9.1.1/firebase-app.js';
Is this normal? I've never seen an import from a URL like this (but I'm also not a native JS dev) Is this a webpack issue and I'm just a dunce? A bug?
Yep, It's a bug. I had the same problem. Fixed it downgrading to the version before 9.1.1:
npm install firebase#9.1.0
I wanted to set up Firebase Auth pre built UI with react
i copied the code from github
i get this error:
TypeError: firebase__WEBPACK_IMPORTED_MODULE_2___default.a.auth is undefined
Screenshot of my Error
https://github.com/firebase/firebaseui-web-react
im using VScode and node.js to install packages
import React from 'react';
import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';
import firebase from 'firebase';
uiConfig = {
// Popup signin flow rather than redirect flow.
signInFlow: 'popup',
// We will display Google and Facebook as auth providers.
signInOptions: [
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
firebase.auth.FacebookAuthProvider.PROVIDER_ID
],
callbacks: {
// Avoid redirects after sign-in.
signInSuccessWithAuthResult: () => false
}
};
Try importing both firebase, and the specific packages you want to use. I was having the same problem in my app with the "auth" package, but adding it specifically after the generic import, made things work:
import * as firebase from "firebase/app";
import "firebase/auth";
You can check it in the official documentation.
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.