I have been getting the error for over two weeks now. I have tried clearing my cache, reinstalling firebase, deleting node modules, and downgrading firebase. I am running out of ideas on what to try next. The app I am working on uses Expo-CLI, React Native, Firebase, and GiftedChat. I am creating a chat page on my app when I receive this error.
While trying to resolve module firebase from file C:...node_modules\firebase\package.json was successfully found. However, this package itself specifies a main module field that could not be resolved (C:...node_modules\firebase\index. Indeed, none of these files exist:
C:...node_modules\firebase\index(.native|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json)
C:...firebase\index\index(.native|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json)
import React, { useState } from 'react'; import { StatusBar } from 'expo-status-bar'; import { ScrollView, TouchableOpacity, View, KeyboardAvoidingView, Image, ImageBackground, } from 'react-native'; import * as firebase from 'firebase'; import { getAuth } from "firebase/auth"; const localImage = require("../BG.png"); import app from '../firebase'; import { Layout, Text, TextInput, Button } from 'react-native-rapi-ui'; export default function ({ navigation }) { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [loading, setLoading] = useState(false); const auth = getAuth(app); async function login() { setLoading(true); await firebase .auth() .signInWithEmailAndPassword(email, password) .catch(function (error) { // Handle Errors here. var errorCode = error.code; var errorMessage = error.message; // ... setLoading(false); alert(errorMessage); }); } return ( <KeyboardAvoidingView behavior="height" enabled style={{ flex: 1 }}> <StatusBar style="auto" translucent backgroundColor="#7a57b5" /> <Layout backgroundColor="#7a57b5" > <ImageBackground source={localImage} resizeMode="cover" style={{ flex: 1, justifyContent: "center", }}> <ScrollView contentContainerStyle={{ flexGrow: 1, }} > <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', paddingTop: 60 }} > <Image source={"./WavezEnt.png"} style={{ marginTop: 100, paddingBottom: 30, }} resizeMode= "cover" /> </View> <View style={{ flex: 3, paddingHorizontal: 20, paddingBottom: 20, }} > <Text fontWeight="bold" style={{ alignSelf: 'center', padding: 30, color: "#FFFFFF" }} size="h3" > Login </Text> <Text fontWeight="bold" style={{color: "#FFFFFF"}}>Email</Text> <TextInput containerStyle={{ marginTop: 15 }} placeholder="Enter your email" value={email} autoCapitalize="none" autoCompleteType="off" autoCorrect={false} placeholderTextColor="#7d807c" keyboardType="email-address" onChangeText={(text) => setEmail(text)} /> <Text fontWeight="bold" style={{ color: "#FFFFFF", marginTop: 15 }}>Password</Text> <TextInput containerStyle={{ marginTop: 15 }} placeholder="Enter your password" value={password} autoCapitalize="none" autoCompleteType="off" autoCorrect={false} placeholderTextColor="#7d807c" secureTextEntry={true} onChangeText={(text) => setPassword(text)} /> <Button text={loading ? 'Loading' : 'Continue'} color= "#7a57b5" onPress={() => { login(); }} style={{ marginTop: 20, }} disabled={loading} /> <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 15, justifyContent: 'center', }} > <Text style={{ color: "#FFFFFF" }} size="md">Don't have an account?</Text> <TouchableOpacity onPress={() => { navigation.navigate('Register'); }} > <Text size="md" fontWeight="bold" style={{ marginLeft: 5, color: "#FFFFFF" }} > Register here </Text> </TouchableOpacity> </View> <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 10, justifyContent: 'center', }} > <TouchableOpacity onPress={() => { navigation.navigate('ForgetPassword'); }} > <Text size="md" style={{ color: "#FFFFFF" }} fontWeight="bold"> Forget password </Text> </TouchableOpacity> </View> </View> </ScrollView> </ImageBackground> </Layout> </KeyboardAvoidingView> );}
AuthProvider
import React, { createContext, useState, useEffect } from 'react'; import firebase from 'firebase'; const AuthContext = createContext(); const AuthProvider = (props) => { // user null = loading const [user, setUser] = useState(null); useEffect(() => { checkLogin(); }, []); function checkLogin() { firebase.auth().onAuthStateChanged(function (u) { if (u) { setUser(true); // getUserData(); } else { setUser(false); // setUserData(null); } }); } return ( <AuthContext.Provider value={{ user, }} > {props.children} </AuthContext.Provider> ); }; export { AuthContext, AuthProvider }; FireStore (Empty "" for privacy purposes import { initializeApp } from "firebase/app"; // 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 const firebaseConfig = { apiKey: "", authDomain: "", databaseURL: "", projectId: "", storageBucket: "", messagingSenderId: "", appId: "", measurementId: "" }; // Initialize Firebase const app = initializeApp(firebaseConfig); const db = initializeFirestore(app, experimentalForceLongPolling: true }); export { db , app };
