0

I am trying to use firebase inside my project but the classes related to firebase are not getting imported.

This is what I did till now:

  1. Created a new project in firebase console
  2. ran the commands, npm install -g firebase-tools, npm install firebase-admin --save and npm install --save firebase
  3. Created a new file called firebase.js in my project and added the following code: 
    import firebase from "firebase"

// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
    apiKey: "AIzaSyAdjdq8JsRSWKeHQYCHNzXm8nn29cOh-4s",
    authDomain: "ig-reels-a9b15.firebaseapp.com",
    projectId: "ig-reels-a9b15",
    storageBucket: "ig-reels-a9b15.appspot.com",
    messagingSenderId: "1018616208158",
    appId: "1:1018616208158:web:bb1026f5301bd9294e070f",
    measurementId: "G-W3051LNHFL"
  };

  const firebaseApp = firebase.initializaApp(firebaseConfig)
  const db = firebaseApp.firestore()

  export default db

I am using db variable to pull out data from the cloud firestore database like this:

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

function App() {
  const [reels, setReels] = useState([])

  useEffect(() => {
    db.collection("reels").onSnapshot(snapshot => {
      console.log(snapshot.docs.toString())
      setReels(snapshot.docs.map(doc => doc.data()))
    })
  }, [])

Whenever I run this code I get the following error:

Compiled with problems:

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

Module not found: Error: Package path . is not exported from package C:\Users\Aditya\Documents\reactjs-practise\reels_clone\node_modules\firebase (see exports field in C:\Users\Aditya\Documents\reactjs-practise\reels_clone\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, C:\Users\Aditya\Documents\reactjs-practise\reels_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.

I have successfully installed all the firebase related tools. Why am I getting this error?

James Z
  • 12,209
  • 10
  • 24
  • 44
Aditya Dixit
  • 255
  • 2
  • 12

1 Answers1

0

First, install firebase then You want to create your own firebase.js file. I am give you the example of

firebase.js

import firebase from 'firebase/app';
import 'firebase/firestore';

const firebaseConfig = {
apiKey: "apiKey",
authDomain: "authDomain",
projectId: "projectId",
storageBucket: "storageBucket",
messagingSenderId: "messagingSenderId",
appId: "appid"
};

firebase.initializeApp(firebaseConfig);

export default firebase;

App.js

const db = firebase.firestore();
//write you own code
Aakash Limbani
  • 147
  • 1
  • 9