解析 Firebase 模块（React-Native）

Posted 2023-02-23

【中文标题】解析 Firebase 模块（React-Native）

【英文标题】：Resolving Firebase Module (React-Native)

【发布时间】：2021-10-29 20:44:55

【问题描述】：

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'
  
);

【问题讨论】：

您使用的是哪个版本的 Firebase？可以分享一下 package.json 吗？

@Dharmaraj 我已经分享了上面的截图

【参考方案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()...

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