FireBase Package Path Error on React Project

Question

I am building a React application, and am quite new to using firebase.

I'am following a instagram clone tutorial, (Clever Programmer's version tutorial). I am at the part of connecting the app to the post creation table, that includes 3 rows, caption, imageURL, and username. However I am met with this error:

ERROR in ./src/firebase.js 3:0-32

Module not found: Error: Package path . is not exported from package /Users/user/node_modules/firebase (see exports field in /Users/user/node_modules/firebase/package.json)
Did you mean './firebase'?
Requests that should resolve in the current directory need to start with './'.
Requests that start with a name are treated as module requests and resolve within module directories (node_modules, /Users/user/Desktop/InstagramClone/instagram-clone/node_modules).
If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.

This is my code:

App.js

import React, { useState, useEffect } from 'react';
import Post from './Post';
import './App.css';
import {db} from './firebase';

function App() {
{/* Setting Variables For Automatic Posts/Variable */}

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

useEffect(()=> {
 db.collection('posts').onSnapshot(snapshot => {
  setPosts(snapshot.docs.map(doc => doc.data()));
 })
}, []);
  return (
    <div className="app">
  
    {/*HEADER */}
    <div className ="app_header">
      <img 
      className="app_headerimage"
      src="https://www.instagram.com/static/images/web/mobile_nav_type_logo.png/735145cfe0a4.png"
      alt=""
    />
    </div>

    <h1> Feed</h1>

 {
   posts.map(post => (
     <Post username={post.username} caption={post.caption} imageURL={post.imageURL}/>
   ))
 }

    </div>
  );
} 

export default App;

Firebase.js

import firebase from "firebase";

const firebaseApp = firebase.initializeApp({
    apiKey: "AIzaSyAnLtnIBO4tQGFB37ZK4yrC9_BeoEo543",
    authDomain: "instagram-clone-22312.firebaseapp.com",
    projectId: "instagram-clone-22312",
    storageBucket: "instagram-clone-22312.appspot.com",
    messagingSenderId: "230176338668",
    appId: "1:220076398446:web:67197f2ib041b4c7e11e8r2",
    measurementId: "L-J7N3NW2EFCW"
  });

  const db = firebaseApp.firestore();
  const auth = firebase.auth();
  const storage = firebase.storage();

  export{db, auth, storage};

Heres my folder structure:

Thank you!

Answer 1

If using firebase modular version supporting tree shaking

import { initializeApp } from "firebase/app";
import { getFirestore} } from "firebase/firestore";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
    // ...
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);


// Initialize Cloud Firestore and get a reference to the service
const db = getFirestore(app);

If using typical namespace version (probably this une judging from your code)

import firebase from "firebase/app";
import "firebase/firestore";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
    // ...
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);


// Initialize Cloud Firestore and get a reference to the service
const db = firebase.firestore();

Important, as kentpickard said, firebase changed their api (for the better), I WOULDN'T recommend downgrading but instead learning to use the correct packages, with the new version you can use both, only thing changing is the way they are imported