火源配置2022

Question

我正在FB克隆教程上编写代码。问题是我是在2022年做的，所以很多更新都需要实现。我对火力基地很陌生，所以我确实需要一些帮助。

我的firebase.js

import firebase from 'firebase';
import 'firebase/storage';

// Your web app's Firebase configuration
const firebaseConfig = {
    apiKey: "AIzaSyDNCuXEn5todyFVWl6CLJaNridOkTxLi1o",
    authDomain: "fbclone-b8dca.firebaseapp.com",
    projectId: "fbclone-b8dca",
    storageBucket: "fbclone-b8dca.appspot.com",
    messagingSenderId: "366781998977",
    appId: "1:366781998977:web:84791acf7d270c5fdbaa80"
};

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

const app = !fireBase.apps.length ? fireBase.initializeApp(firebaseConfig) : fireBase.app;

const db = app.firestore();

const storage = fireBase.storage();

export {db, storage}

我的inputbox.js

import { useSession } from "next-auth/react"
import Image from "next/image"
import { CameraIcon, EmojiHappyIcon, VideoCameraIcon } from "@heroicons/react/solid";
import {useRef} from 'react'
import {db, storage} from '../fireBase';

const InputBox = () => {
    const {data: session} = useSession();
    const inputRef = useRef(null);

    const sendPost = (e) => {
        e.preventDefault();
        if (!inputRef.current.value) return;

        db.collection("posts").add({
                message: inputRef.current.value,
                name: session.user.name,
                email: session.user.email,
                image: session.user.image,
                timestamp: firebase.firestore.FieldValue.serverTimestamp(),
            })

        inputRef.current.value = ""
    }

这是我得到的错误：

./fireBase.js:1:0
Module not found: Package path . is not exported from package /home/alondrob/code/labs/projects/fbclone/node_modules/firebase (see exports field in /home/alondrob/code/labs/projects/fbclone/node_modules/firebase/package.json)
> 1 | import firebase from 'firebase';
  2 | import 'firebase/storage';
  3 | 
  4 | // Your web app's Firebase configuration

Import trace for requested module:
./components/InputBox.js
./components/Feed.js
./pages/index.js

https://nextjs.org/docs/messages/module-not-found

我知道导入语法发生了变化，我尝试了很少的事情，比如

// Initialize Cloud Firestore through Firebase
import { initializeApp } from "firebase/app"
import { getFirestore } from "firebase/firestore"
const firebaseApp = initializeApp({
  apiKey: '### FIREBASE API KEY ###',
  authDomain: '### FIREBASE AUTH DOMAIN ###',
  projectId: '### CLOUD FIRESTORE PROJECT ID ###'
});

const db = getFirestore();

我只是不知道如何把它配置在一起。

Answer 1

不要从过时的教程开始，考虑从Firebase 文档或codelab开始。他们完全跟上了最新的变化。

虽然最新的SDK可能有不同的语法，但旧的SDK仍能正常工作。因此，如果您使用的是过时的教程/资源，则可以始终使用本教程所基于的SDK版本。您还可以按照升级指南中的说明进行在compat模式下使用最新的SDK。

Answer 2

您正在处理的是firebase版本8代码库，并试图在firbase.js inbox.js component中导入本地组件。

问题：您必须安装防火墙而不指定版本为版本8，，这意味着您已经安装了最新版本的版本9，而不是版本8.。

因此，您必须重构firebase.js组件中的代码，如下所示。

 import { initializeApp, getApps, getApp } from "firebase/app";
    import { getFirestore } from "firebase/firestore";
    import { getStorage } from "firebase/storage";
    
    const firebaseConfig = {
      apiKey: "AIzaSyDNCuXEn5todyFVWl6CLJaNridOkTxLi1o",
      authDomain: "fbclone-b8dca.firebaseapp.com",
      projectId: "fbclone-b8dca",
      storageBucket: "fbclone-b8dca.appspot.com",
      messagingSenderId: "366781998977",
      appId: "1:366781998977:web:84791acf7d270c5fdbaa80"
    };
    
   
    const app = !getApps().length ? initializeApp(firebaseConfig) : 
    getApp();
    
    const db = getFirestore(app);
    const storage = getStorage(app);
    
export default {db, storage};

尽管如此，上面的解决方案将解决您的问题，但另一个将由inputbox.js. 产生。因此，在inputbox.js组件代码中，重构如何从firebase 按照这个链接获取数据

重构这个

db.collection("posts").add({
                message: inputRef.current.value,
                name: session.user.name,
                email: session.user.email,
                image: session.user.image,
                timestamp: firebase.firestore.FieldValue.serverTimestamp(),
            })