React Native - Expo Error - "export 'auth' was not found in 'firebase' :

Question

Building an auth app using native with the expo.

Create firebase.js file and link the app

exported auth properly in firebase.js still can't import auth in my LoginScreen.js file

It keeps throwing the error

"export 'auth' was not found in 'firebase'
  11 | 
  12 |     const handleSignup = () =>{
> 13 |         auth
     |        ^
  14 |         .createUserWithEmailAndPassword(email, 
password)
  15 |         .then(usersCredentials => {
  16 |             const user = userCredentials.user; 

Firebase.js

// Import the functions you need from the SDKs you need
// import * as firebase from "firebase";
import firebase from "firebase/app"
// import "firebase/auth"
// 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
const firebaseConfig = {
  apiKey: "AIzaSyB4R4he96dglIFlyGQyP8aYKLtzfGGc_ZQ",
  authDomain: "fir-auth-ec54a.firebaseapp.com",
  projectId: "fir-auth-ec54a",
  storageBucket: "fir-auth-ec54a.appspot.com",
  messagingSenderId: "211989329100",
  appId: "1:211989329100:web:765e2715889a0fc374be69"
};

// Initialize Firebase
 let app;
 if (firebase.apps.length == 0) {
     app = firebase.initializeApp(firebaseConfig)
 } else{
     app = firebase.app()
 }

 const auth = firebase.auth()

 export default { auth }

dependencies in package.json

"dependencies": {
    "@react-navigation/native": "^6.0.6",
    "@react-navigation/native-stack": "^6.2.5",
    "expo": "~44.0.0",
    "expo-status-bar": "~1.2.0",
    "firebase": "8.2.3",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-native": "0.64.3",
    "react-native-safe-area-context": "3.3.2",
    "react-native-screens": "~3.10.1",
    "react-native-web": "0.17.1"
  },

EDIT

This is where I am importing the firebase:

import React, { useState } from 'react'
import { KeyboardAvoidingView, StyleSheet, Text, View } from 'react-native'
import { TextInput, TouchableOpacity } from 'react-native-web'
// import firebase from "firebase/app"
// import "firebase/auth"
import { auth } from '../firebase'

const LoginScreen = () => {
    const [email, setEmail] = useState('')
    const [password, setPassword] = useState('')
const handleSignup = () =>{
    auth
    .createUserWithEmailAndPassword(email, password)
    .then(userCredentials => {
        const user = userCredentials.user;
        console.log(user.email)
    })
    .catch(error => alert(error.message))
}

return (
    <KeyboardAvoidingView
        style={styles.container}
        behavior='padding'
    >
        <View style={styles.inputContainer}>
            <TextInput 
                placeholder="Email"
                value={email}
                onChangeText={text => setEmail(text) }
                style={styles.input}
            />
            <TextInput 
                placeholder="Password"
                value={password}
                onChangeText={text => setPassword(text) }
                style={styles.input}
                secureTextEntry
            />
        </View>

        <View style={styles.buttonContainer}>
            <TouchableOpacity
                onPress={() => {}}
                style={styles.buttonText}
            >`enter code here`
            <Text style={styles.button}>Log In</Text>
            </TouchableOpacity>
            <TouchableOpacity
                onPress={handleSignup}
                style={[styles.button, styles.buttonOutline]}
            >
            <Text style={styles.buttonOutlineText}>Register</Text>
            </TouchableOpacity>
        </View>
    </ KeyboardAvoidingView>

)}

export default LoginScreen

const styles = StyleSheet.create({
    container:{
        flex:1,
        justifyContent:'center',
        alignItems:'center',
    },
    inputContainer:{
        width: '80%',
    
},
input:{
    backgroundColor:'white',
    paddingHorizontal: 15,
    paddingVertical: 10,
    borderRadius: 10,
    marginTop: 5,
},
buttonContainer:{
    width: '60%',
    justifyContent:'center',
    alignItems:'center',
    marginTop: 40,
},
button:{
    backgroundColor: '#1674B5',
    width:'100%',
    padding:15,
    borderRadius:10,
    alignItems:'center'
},
buttonText:{
    color:'white',
    fontWeight:'700',
    fontSize:16,
},
buttonOutline:{
    backgroundColor:'white',
    marginTop:5,
    borderColor:'#1674B5',
    borderWidth:2,
},
buttonOutlineText:{
    color:'#1674B5',
    fontWeight:'700',
    fontSize:16,
},})

But now I can't see anything on the Web Browser Emulator. VS code console is showing "Build Complete". What should I do to fix it?

This is the Screenshot of my emulator now:

Snack is giving me this error

Answer 1

Firebase has recently undergone significant changes; make use of this. 

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

const firebaseConfig = {
  ....
};

// Use this to initialize the firebase App
const firebaseApp =firebase.initializeApp(firebaseConfig);

// Use these for auth

const auth = firebase.auth();

export {auth};

Answer 2

This line is exporting an object, as the default export, with a single property of auth:

export default { auth }

To import this object, you would use:

import lib from './yourfile.js';

const auth = lib.auth;
// or
const { auth } = lib;

However, if you intend on using:

import { lib } from './yourfile.js';

Remove the default keyword to define an export called auth using either:

const auth = firebase.auth()
export { auth }

or

export const auth = firebase.auth();