Firebase configuration 2022

Question

I am coding along on a FB clone tutorial. The issue is that I'm doing it in 2022, so a lot of updates need to be implemented. I'm really new to firebase, so i do need some help on this.

my 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}

my 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 = ""
    }

this is the error that i get:

./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

I know the import syntax has changed and i tried few things like

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

I just not sure how to configure it all together.

score 0 · Answer 1 · answered Mar 02 '22 at 19:30

Instead of starting from an outdated tutorial, consider starting from the Firebase documentation or codelab. They are fully up to date with the latest changes.

While the latest SDKs may have a different syntax, the older SDKs continue to work just fine. So if you work from an outdated tutorial/resource, you can always use the SDK version that the tutorial is based on. You can also use the latest SDK in compat mode, by following the instructions in the upgrade guide.

Aliyu Usman · Answer 2 · 2022-07-10T17:36:21.833

Your are dealing with firebase version 8 code base and trying to import your local firbase.js component inside inbox.js component

Issue: you must have install firebase without specifying the version as version 8, which means you have install the latest version of firebase, version 9 instead of version 8.

As such you must refactor the code inside firebase.js component as below.

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

Though, the solution above will solve your issue but one more will result from inputbox.js. So inside inputbox.js component code, refactor how you are fetchig data from firebase follow this link for that

Refactor this

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(),
            })

Firebase configuration 2022

2 Answers2

Linked