skip to Main Content

I’m following a tutorial and I’m not sure what the problem is I keep getting an error when I try to import { db } from '../firebase.config'.

I’ve tried everything and looked at the tutorials code in git they’re the same so I think the problem is new.

This is the firebase.config.js file and the SignUp.jsx file where I tried to import db.

    // Import the functions you need from the SDKs you need
    import { initializeApp } from "firebase/app";
    import { getAnalytics } from "firebase/analytics";
    import { getFirestore} from 'firebase/getFirestore';
    // TODO: Add SDKs for Firebase products that you want to use
    // https://firebase.google.com/docs/web/setup#available-libraries

    // Your web app's Firebase configuration
    // For Firebase JS SDK v7.20.0 and later, measurementId is optional
    const firebaseConfig = {
      apiKey: ****,
      authDomain:****
      projectId: ****",
      storageBucket: ****,
      messagingSenderId: ****,
      appId: ****,
      measurementId: ****
    };

    // Initialize Firebase
    initializeApp(firebaseConfig)
    const app = initializeApp(firebaseConfig);
    const analytics = getFirestore();
    const db = getFirestore()
    export default db;



    import React from 'react'
    import { useRef, useState, useEffect } from 'react';
    import {Link, useNavigate} from 'react-router-dom'
    import {faCheck, faTimes, faInForCircle } from '@fortawesome/free-solid-svg-icons';
    import { fontAwesomeIcon } from '@fortawesome/react-fontawesome'
    import { 
      getAuth, 
      createUserWithEmailAndPassword, 
      updateProfile 
    } from 'firebase/auth';
    import { db } from '../firebase.config';

2

Answers


  1. Chosen as BEST ANSWER

    I found my problem.

    Its import {getFirestore} from "firebase/firestore"; and not import { getFirestore} from 'firebase/getFirestore';.


  2. You are exporting the DB as default, to make it work export this way:

    firebase.config

    import { initializeApp } from "firebase/app";
    import { getAnalytics } from "firebase/analytics";
    import { getFirestore} from 'firebase/getFirestore';
    
    const firebaseConfig = {
      apiKey: ****,
      authDomain:****
      projectId: ****,
      storageBucket: ****,
      messagingSenderId: ****,
      appId: ****,
      measurementId: ****
    };
    
    // Initialize Firebase
    initializeApp(firebaseConfig)
    const app = initializeApp(firebaseConfig);
    const analytics = getFirestore();
    const db = getFirestore()
    
    // THIS WAY
    export {app, db, analytics};
    

    Then on your file you can import this way

    // HERE IM SHOWING MORE THAN JUST IMPORT THE DB, BUT YOU CAN IMPORT JUST WHAT YOU WANT
    import {app, db, analytics} from "./firebase.config"
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search