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;