TypeError: util.getModularInstance(auth).onAuthStateChanged is not a function - Upgrading to Firebase SDK 9 Syntax

Viewed 119

I'm trying to upgrade Firebase SDK from 8 to 9 in React Native, following this guide: https://firebase.google.com/docs/web/modular-upgrade

But I keep encountering the error

TypeError: util.getModularInstance(auth).onAuthStateChanged is not a function.

Oddly, it works when I switch back to the old Version 8/Version 9 Compat syntax while maintaining Version 9 Modular imports (without compat), only for the onAuthStateChanged function.

I'm using the Firebase 9.9.0 npm package.

Any help would be much appreciated!

Import statements:

import firebaseApp from './src/config/ConfigFirebase';
import { getAuth, onAuthStateChanged } from "firebase/auth";

Version 9 Modular Syntax: onAuthStateChanged (Free Function):

useEffect(() => {

    async function checkUser() {

      const auth = getAuth(firebaseApp);
      onAuthStateChanged((auth, user) => {
        if(user !== null) {
          setIsLogged(true);
          setLoaded(true);

        } else {
          setIsLogged(false);
          setLoaded(true);

        }
      })
    }

    checkUser();

  }, []);

Resulting Error:

[Unhandled promise rejection: TypeError: util.getModularInstance(auth).onAuthStateChanged is not a function. (In 'util.getModularInstance(auth).onAuthStateChanged(nextOrObserver, error, completed)', 'util.getModularInstance(auth).onAuthStateChanged' is undefined)]
at node_modules\@firebase\auth\dist\rn\phone-51423d6b.js:5862:49 in tslib.__awaiter$argument_3
at App.js:105:6 in checkUser
at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
at node_modules\regenerator-runtime\runtime.js:294:29 in invoke
at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
at node_modules\regenerator-runtime\runtime.js:155:27 in invoke
at node_modules\regenerator-runtime\runtime.js:190:16 in PromiseImpl$argument_0
at node_modules\react-native\node_modules\promise\setimmediate\core.js:45:6 in tryCallTwo
at node_modules\react-native\node_modules\promise\setimmediate\core.js:200:22 in doResolve
at node_modules\react-native\node_modules\promise\setimmediate\core.js:66:11 in Promise
at node_modules\regenerator-runtime\runtime.js:189:15 in callInvokeWithMethodAndArg
at node_modules\regenerator-runtime\runtime.js:212:38 in enqueue
at node_modules\regenerator-runtime\runtime.js:239:8 in exports.async
at App.js:102:4 in checkUser
at App.js:118:13 in useEffect$argument_0
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19280:25 in invokePassiveEffectCreate
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:93:4 in invokeGuardedCallbackProd
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:318:2 in invokeGuardedCallback
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19362:29 in flushPassiveEffectsImpl
at node_modules\scheduler\cjs\scheduler.development.js:468:23 in unstable_runWithPriority
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18126:21 in performSyncWorkOnRoot
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5911:33 in runWithPriority$argument_1
at node_modules\scheduler\cjs\scheduler.development.js:468:23 in unstable_runWithPriority
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5906:23 in flushSyncCallbackQueueImpl
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5893:28 in flushSyncCallbackQueue
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:17745:30 in scheduleUpdateOnFiber
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:21484:23 in updateContainer
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:22144:17 in render
at node_modules\react-native\Libraries\ReactNative\renderApplication.js:58:4 in renderApplication
at node_modules\react-native\Libraries\ReactNative\AppRegistry.js:117:25 in runnables.appKey.run
at node_modules\react-native\Libraries\ReactNative\AppRegistry.js:202:4 in runApplication
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:414:4 in __callFunction
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:113:6 in __guard$argument_0
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:365:10 in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:112:4 in callFunctionReturnFlushedQueue

Switching only onAuthStateChanged to Version 8/Version 9 Compat Syntax works: auth.onAuthStateChanged (chained from auth instance):

useEffect(() => {

    async function checkUser() {

      const auth = getAuth(firebaseApp);
      auth.onAuthStateChanged(user => {
        if(user !== null) {
          setIsLogged(true);
          setLoaded(true);

        } else {
          setIsLogged(false);
          setLoaded(true);

        }
      })
    }

    checkUser();

  }, []);

And just in case it helps, I'm initializing fine with Modular 9 syntax as well.

ConfigFirebase.js:

import { initializeApp } from 'firebase/app';

const firebaseConfig = {
  ...
  ...
};

const firebaseApp = initializeApp(firebaseConfig);

export default firebaseApp;
1 Answers

try this instead:

onAuthStateChanged(auth, (user)=>{ ....

notice how auth is not a parameter to the callback function.

Related