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 （为了更好），我不建议降级，而是学习使用正确的包，新版本可以同时使用，唯一改变的是它们的导入方式