FireBase Package React 項目路徑錯誤

Question

我正在構建一個 React 應用程序，並且對使用 firebase 非常陌生。

我正在關注 Instagram 克隆教程（Clever Programmer's version tutorial）。 我正在將應用程序連接到帖子創建表，其中包括 3 行、標題、imageURL 和用戶名。 但是我遇到了這個錯誤：

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.

這是我的代碼：

應用程序.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};

這是我的文件夾結構：

謝謝！

Answer 1

如果使用firebase模塊化版本支持搖樹

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);

如果使用典型的命名空間版本（從你的代碼來看可能是這個）

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();

重要的是，正如 kentpickard 所說，firebase 改變了他們的 api （為了更好），我不建議降級，而是學習使用正確的包，新版本可以同時使用，唯一改變的是它們的導入方式