firebase_firebase__WEBPACK_IMPORTED_MODULE_5__.default.ref 不是 function

Question

它給我的錯誤無法弄清楚我認為它與 firebase.js 有關，但相同的配置在其他項目中工作正常，但這個有這個問題。

import React, { useState } from 'react';
    import uuid from 'react-uuid';
    import { useSelector, useDispatch } from 'react-redux';
    import DatePicker from 'react-datepicker';
    import 'react-datepicker/dist/react-datepicker.css';
    import database from '../firebase/firebase';
    
    
    const AddTasks = () => {
    
        const dispatch = useDispatch();
        const newLocal = null;
        const [selectedDate, setSelectedDate] = useState(newLocal);
        const [task, setTask] = useState('');
        const date = new Date()
        const userId = useSelector(state => state.auth.currentUser);
    
    
        const addTask = () => {
            const payload = { id: uuid(), text: task, completed: false, addedAt: selectedDate.toString() }

在這里它給了我這個錯誤我也會在此之后分享我的 firebase.js

            const dbtasksWrapper = database.ref().child(userId).child('tasks');
            return dbtasksWrapper.child(payload.id).update(payload).then(() => {
                setTask('');
                setSelectedDate(null);
                dispatch({ type: "ADD_TASKS", payload })
            })
        }
    
        return (
            <form onSubmit={e => {
                e.preventDefault(e.target.value);
                addTask();
            }}>
                <input className="input-group-prepend"
                    value={task}
                    placeholder="Enter your Task"
                    onChange={e => setTask(e.target.value)}
                />
                <DatePicker className="input-group-prepend" placeholderText="Enter task date " selected={selectedDate} onChange={(date) => setSelectedDate(date)} showTimeSelect timeFormat="HH:mm" timeIntervals={15} timeCaption="time" dateFormat="MMMM d, yyyy H:mm aa" minDate={date} /><br />
                <input className="btn btn-primary" type='submit' value='Submit' />
    
            </form>
        );
    
    
    };
    
    
    export default AddTasks;

這是我的 firebase.js 文件不知道如何擺脫這個問題

    import app from 'firebase/app';
import 'firebase/auth';
import "firebase/firestore";
import "firebase/database"




var firebaseConfig = {
        apiKey: "AIzaSyAM7bXNJc-BlyLjUK23laYxDXSdqrg5m0A",
        authDomain: "hse-project-aefd3.firebaseapp.com",
        databaseURL: "https://hse-project-aefd3-default-rtdb.firebaseio.com",
        projectId: "hse-project-aefd3",
        storageBucket: "hse-project-aefd3.appspot.com",
        messagingSenderId: "651568614628",
        appId: "1:651568614628:web:2d0e91e352bbe6ef6970f1"
    };
    
    const firebase = app.initializeApp(firebaseConfig);
    
    // Get a reference to the database service
    export const database = firebase.database();
    
    export default firebase;

Answer 1

“firebase/app”中沒有導出的模塊“app”

您應該import firebase from 'firebase/app'

import firebase from 'firebase/app';
import 'firebase/auth';
import "firebase/firestore";
import "firebase/database"

var firebaseConfig = {
        apiKey: "AIzaSyAM7bXNJc-BlyLjUK23laYxDXSdqrg5m0A",
        authDomain: "hse-project-aefd3.firebaseapp.com",
        databaseURL: "https://hse-project-aefd3-default-rtdb.firebaseio.com",
        projectId: "hse-project-aefd3",
        storageBucket: "hse-project-aefd3.appspot.com",
        messagingSenderId: "651568614628",
        appId: "1:651568614628:web:2d0e91e352bbe6ef6970f1"
    };
    
    const app = firebase.initializeApp(firebaseConfig);
    
    // Get a reference to the database service
    export const database = app.database();
    
    export default firebase;