我在制作新的反应时遇到错误 - 本机应用程序

Question

Uncaught TypeError: firebase_compat_app__WEBPACK_IMPORTED_MODULE_4__.initializeApp is not a function

This is a error which is coming when I am making a new react - native app

CODE:

import { ActivityIndicator, StyleSheet, View } from 'react-native'
import React from 'react';
import * as firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/database';

class LoadingScreen extends React.Component {

    componentDidMount() { 
        this.checkIfLoggedIn();
    };


    checkIfLoggedIn = () => {
        firebase.auth().onAuthStateChanged(user => {
            if (user) {
                this.props.navigation.navigate('DashboardScreen')
            } else {
                this.props.navigation.navigate('LoginScreen')
            };
        });
    };


    render() {
        return (
            <View style={styles.container}>
                <ActivityIndicator size="large" />
            </View>
        )
    }
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    }
});

export default LoadingScreen;

Answer 1

I see a few concerns/problems with the above code:

• use of compat is not encouraged; Firebase explicitly stated that this is a stop-gap measure for people with large v8 code bases that need to move to v9 but want to stick with the v8 syntax -- and that the v8 syntax (and compat ) are to be deprecated in the very near future
• though Class Components remain valid in React, as you build new code I recommend you consider moving to Function Components
• there does not seem to be any attempt in your code to shut off the onAuthStateChanged() listener; this is a resource leak in your code
• it is hard to tell why that particular error is occurring; you say that you initialize Firebase in a different file so we can't see how it is initialized
• the above code relies on the "default app" (your use of firebase.auth() without specifying the particular app ) -- without knowing how you initialized Firebase we can't tell if that is "doing the right thing"
• I would encourage you to NOT rely on a "default app" but to explicitly specify the app you are invoking the Authentication service from

BTW: I have moved to using the Context API for initializing Firebase and sharing its services to the rest of my app. You can see this pattern in the FirebaseProvider.js of the following starter project. Feel free to use/copy as you see fit: https://github.com/gregfenton/react-and-user-profiles-with-firebase-auth-and-firestore