Firebase Reactfire getFunction(app) Uncaught Error: Service functions is not available

953 Views Asked by At

I created a provider for my firebase services with reactfire like auth, firestore and functions. Auth and firestore are working, but the failure

Uncaught Error: Service functions is not available

is thrown, when running my app.

"firebase": "^9.6.6"

"reactfire": "^4.2.1"

import React, { useEffect } from 'react';
import { getAuth} from 'firebase/auth';
import { getFirestore } from 'firebase/firestore';
import { getFunctions } from 'firebase/functions';
import {
  useFirebaseApp,
  AuthProvider,
  FirestoreProvider,
  FirebaseAppProvider,
  FunctionsProvider,
} from 'reactfire';

export const FirebaseProvider = ({ children }: { children: JSX.Element }): JSX.Element => {
  const firebaseConfigEnv = process.env.NEXT_PUBLIC_FB_CONFIG;

  return (
    <FirebaseAppProvider firebaseConfig={firebaseConfig}>
      {children}
    </FirebaseAppProvider>
  );
};

export const FirebaseServiceProvider = ({children}: {children: JSX.Element | JSX.Element[]}): JSX.Element => {
  const app = useFirebaseApp();
  
  return (
    <AuthProvider sdk={getAuth(app)}>
      <FirestoreProvider sdk={getFirestore(app)}>
        <FunctionsProvider sdk={getFunctions(app)}> // <-- here happens the issue
          {children}
        </FunctionsProvider>
      </FirestoreProvider>
    </AuthProvider>
  );
};
1

There are 1 best solutions below

2
Erik Metz On

Quickfix for me was uninstalling firebase package and re-installing, works for local and production. See https://github.com/firebase/firebase-js-sdk/issues/6019