Creo que esto debería funcionar.

 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.

El archivo que quiero importar 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