解析 Firebase 模块（React-Native）

Question

Error: While trying to resolve module `firebase` from file `/Users/---i/Desktop/mapnav/database/firebase.js`, the package `/Users/---/Desktop/mapnav/node_modules/firebase/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/Users/---/Desktop/mapnav/node_modules/firebase/index`. Indeed, none of these files exist:


  * /Users/--/Desktop/mapnav/node_modules/firebase/index(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)

我正在尝试通过其 API 访问 Firebase 身份验证服务；但是，我不断收到上述错误，并且无法在应用程序中使用 firebase。我正在使用 web firebase SDK；并尝试在我的 Login.js 文件中调用 api 以验证登录名。我正在关注的教程他们像这样初始化它：firebase.initializeApp(firebaseConfig);并将其导出并在任何需要的地方调用它，但再次导致相同的错误。

Firebase 文件：

import * as firebase from 'firebase';



// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
export const firebaseConfig = {
  apiKey: "AIzaSyB4B2S4hYhtifD9QyM39B9U6Ms7uOKQMQU",
  authDomain: "reactnativefb-15348.firebaseapp.com",
  projectId: "reactnativefb-15348",
  storageBucket: "reactnativefb-15348.appspot.com",
  messagingSenderId: "188069430669",
  appId: "1:177069430799:web:1c6a08c65cfe3bb7a5057a",
  measurementId: "G-0WKYCHFZWK"
};

// Initialize Firebase
// export const app = initializeApp(firebaseConfig);
// const analytics = getAnalytics(app);
firebase.initializeApp(firebaseConfig);
export default firebase;

登录Js：

import React, { Component } from 'react';
import { StyleSheet, Text, View, TextInput, Button, Alert, ActivityIndicator } from 'react-native';
// import { firebase } from '@react-native-firebase/auth';
import firebase from './database/firebase';

export default class Login extends Component {
  
  constructor() {
    super();
    this.state = { 
      email: '', 
      password: '',
      isLoading: false
    }
  }

  updateInputVal = (val, prop) => {
    const state = this.state;
    state[prop] = val;
    this.setState(state);
  }

  userLogin = () => {
    if(this.state.email === '' && this.state.password === '') {
      Alert.alert('Enter details to signin!')
    } else {
      this.setState({
        isLoading: true,
      })
      firebase
      .auth()
      .signInWithEmailAndPassword(this.state.email, this.state.password)
      .then((res) => {
        console.log(res)
        console.log('User logged-in successfully!')
        this.setState({
          isLoading: false,
          email: '', 
          password: ''
        })
        this.props.navigation.navigate('Dashboard')
      })
      .catch(error => this.setState({ errorMessage: error.message }))
    }
  }

  render() {
    if(this.state.isLoading){
      return(
        <View style={styles.preloader}>
          <ActivityIndicator size="large" color="#9E9E9E"/>
        </View>
      )
    }    
    return (
      <View style={styles.container}>  
        <TextInput
          style={styles.inputStyle}
          placeholder="Email"
          value={this.state.email}
          onChangeText={(val) => this.updateInputVal(val, 'email')}
        />
        <TextInput
          style={styles.inputStyle}
          placeholder="Password"
          value={this.state.password}
          onChangeText={(val) => this.updateInputVal(val, 'password')}
          maxLength={15}
          secureTextEntry={true}
        />   
        <Button
          color="#3740FE"
          title="Signin"
          onPress={() => this.userLogin()}
        />   

        <Text 
          style={styles.loginText}
          onPress={() => this.props.navigation.navigate('Signup')}>
          Don't have account? Click here to signup
        </Text>                          
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    display: "flex",
    flexDirection: "column",
    justifyContent: "center",
    padding: 35,
    backgroundColor: '#fff'
  },
  inputStyle: {
    width: '100%',
    marginBottom: 15,
    paddingBottom: 15,
    alignSelf: "center",
    borderColor: "#ccc",
    borderBottomWidth: 1
  },
  loginText: {
    color: '#3740FE',
    marginTop: 25,
    textAlign: 'center'
  },
  preloader: {
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    position: 'absolute',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#fff'
  }
});

Answer 1

您使用的是新的模块化 SDK (v9.0.0)，因此您无法再进行以下导入：

import firebase from "firebase"

如果您想使用旧的命名空间语法，则必须使用兼容库：

import firebase from "firebase/compat/app"

在您的 Firebase 文件中，您混合了两种语法。首先从顶部移除导入，初始化不带命名空间的 Firebase 并导出相关服务：

// firebase.js

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

const firebaseConfig = {...}

const app = initializeApp(app)
const auth = getAuth(app)

export {auth}

现在您可以在其他组件中导入身份验证：

import {auth} from "../path/to/firebase.js"
import {signInWithEmailAndPassword} from "firebase/auth"


// use the imported methods
signInWithEmailAndPassword(auth, "email", "password").then(() => {
  //...
})

// This is older name-spaced version
// firebase.auth().signInWithEmailAndPassword()...

确保引用导入的路径正确。