I can't import db to my app.

./src/Feed.js Attempted import error: 'db' is not exported from './firebase'.

import * as firebase from 'firebase';
import 'firebase/firestore';

const firebaseConfig = {
    apiKey: "",
    authDomain: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: ""
};


const firebaseApp=firebase.initializeApp(firebaseConfig);
const db=firebaseApp.firestore();
const auth=firebase.auth();


export default {db,auth};

CodePudding user response：

I think this should work.

import * as firebase from 'firebase';
import 'firebase/firestore';

const firebaseConfig = {
    apiKey: "",
    authDomain: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: ""
};

const firebaseApp = firebase.initialiseApp(firebaseConfig);
export const db = firebaseApp.firestore();
export const auth = firebase.auth();

// You can remove the export default.

CodePudding user response：

The file i want to import db:

import React,{useState,useEffect} from 'react'
import './Feed.css'
import CreateIcon from '@mui/icons-material/Create';
import InputOption from './InputOption'
import ImageIcon from '@mui/icons-material/Image';
import SubscriptionsIcon from '@mui/icons-material/Subscriptions';
import EventNoteIcon from '@mui/icons-material/EventNote';
import CalendarViewDayIcon from '@mui/icons-material/CalendarViewDay';
import Post from './Post';

import { db } from"./firebase";

function Feed() {

    const[posts,setPosts]=useState([]);

    useEffect(()=>{
        db.collection('posts').onSnapshot(snapshot=>{
            setPosts(snapshot.docs.map(doc=>(
                {
                    id:doc.id,
                    data:doc.data(),

                }
            )))
        })
    },[])

    const sendPost=e=>{
        e.preventDefault();

    }
    return (
        <div className="feed">
            <div className="feed_inputContainer">
                <div className="feed_input">
                <CreateIcon/>
                <form>
                    <input type="text" placeholder="Start a post" />
                    <button onClick={sendPost} type="submit ">Send</button>
                </form>
                </div>
                <div className="feed_inputOptions">
                    <InputOption Icon={ImageIcon} title='Photo' color="#70B5F9"/>

                    <InputOption Icon={SubscriptionsIcon} title="Video" color="#E7A33E"/>
                    
                    <InputOption Icon={EventNoteIcon} title="Event" color="#C0CBCD"/>

                    <InputOption Icon={CalendarViewDayIcon} title="Write article" color="#7FC15E"/>

                </div>
            </div>
            {posts.map(([post])=>{
                <Post/>
            })}

            <Post name="Sonny Shanga" description='This is a test' 
            message='WOW this worked' />
        </div>
    )
}

export default Feed