React Native引入Firebase SDK提示模块解析失败如何解决？

Firebase 9及以上版本采用模块化API设计，不再支持旧版本import * as firebase from 'firebase'的全局导入写法，你的配置文件用了已废弃的全局导入语法，才会触发模块解析失败报错。

1. 修改firebase.js配置文件 #

删掉旧的全局导入逻辑，改用模块化API初始化，需要用到的认证服务单独导入：

// 删掉错误的旧导入：import * as firebase from 'firebase';
// React Native环境不支持analytics，直接删除相关导入
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

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"
};

// 初始化Firebase
const app = initializeApp(firebaseConfig);
// 初始化认证服务实例
const auth = getAuth(app);
// 导出需要的实例
export { auth };
export default app;

2. 修改Login.js调用逻辑 #

直接导入认证实例调用对应方法即可：

import React, { Component } from 'react';
import { StyleSheet, Text, View, TextInput, Button, Alert, ActivityIndicator } from 'react-native';
// 导入认证实例和登录方法
import { auth } from './database/firebase';
import { signInWithEmailAndPassword } from 'firebase/auth';

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,
      })
      signInWithEmailAndPassword(auth, 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, isLoading: false }))
    }
  }

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

3. 清除缓存重启项目 #

修改完成后执行以下操作避免缓存导致的报错：

• 停止当前运行的metro服务
• 执行npx react-native start --reset-cache重启服务
• 重新编译运行APP

内容的提问来源于stack exchange，提问作者Ayaan Abbasi