简体   繁体   English

React- Firebase: Uncaught TypeError: firebase.firestore is not a function

[英]React- Firebase: Uncaught TypeError: firebase.firestore is not a function

So I have tried methods in "similar question" with no luck so therefore making new one.因此,我尝试了“类似问题”中的方法,但没有运气,因此制作了新方法。

I got 2 files,我有2个文件,

1: firebase.js: 1:firebase.js:

 // Import the functions you need from the SDKs you need import { initializeApp } from "firebase/app"; import { getAnalytics } from "firebase/analytics"; import "firebase/firestore"; import "firebase/auth"; // TODO: Add SDKs for Firebase products that you want to use // https://firebase.google.com/docs/web/setup#available-libraries // here i want to import the seed file import { seedDatabase } from "../seed"; // Your web app's Firebase configuration // For Firebase JS SDK v7.20.0 and later, measurementId is optional const firebaseConfig = { apiKey: "something", authDomain: "something", projectId: "something", storageBucket: "something", messagingSenderId: "something", appId: "something", measurementId: "something", }; // Initialize Firebase const firebaseApp = initializeApp(firebaseConfig); const analytics = getAnalytics(firebaseApp); const FieldValue = initializeApp.firebase; // here is where i want to call the seed file (Only once) // seedDatabase(firebase); console.log("firebaseApp", firebaseApp); seedDatabase(firebaseApp); export { firebaseApp, analytics, FieldValue };

second file: seed.js:第二个文件:seed.js:

 export function seedDatabase(firebase) { const users = [ { userId: "zUl6iYVhYJU7goNIw8U1vhno5v93", username: "Danier", fullName: "Danier Valiev", emailAddress: "Danier-1995@hotmail.com", following: ["2"], followers: ["2", "3", "4"], dateCreated: Date.now(), }, { userId: "2", username: "raphael", fullName: "Raffaello Sanzio da Urbino", emailAddress: "raphael@sanzio.com", following: [], followers: ["zUl6iYVhYJU7goNIw8U1vhno5v93"], dateCreated: Date.now(), }, ]; // eslint-disable-next-line prefer-const for (let k = 0; k < users.length; k++) { firebase.firestore().collection("users").add(users[k]); } // eslint-disable-next-line prefer-const for (let i = 1; i <= 5; ++i) { firebase .firestore() .collection("photos") .add({ photoId: i, userId: "2", imageSrc: `/images/users/raphael/${i}.jpg`, caption: "Saint George and the Dragon", likes: [], comments: [ { displayName: "dali", comment: "Love this place, looks like my animal farm!", }, { displayName: "orwell", comment: "Would you mind if I used this picture?", }, ], userLatitude: "40.7128°", userLongitude: "74.0060°", dateCreated: Date.now(), }); } }

In my console.log i am getting this error:在我的 console.log 中,我收到此错误:

seed.js:43 Uncaught TypeError: firebase.firestore is not a function
at seedDatabase (seed.js:43:1)
at ./src/lib/firebase.js (firebase.js:34:1)
at options.factory (react refresh:6:1)
at __webpack_require__ (bootstrap:24:1)
at fn (hot module replacement:62:1)
at ./src/index.js (firebase.js:4:1)
at options.factory (react refresh:6:1)
at __webpack_require__ (bootstrap:24:1)
at startup:7:1
at startup:7:1

Incase you want to look at index.js, this is the code there:如果您想查看 index.js,这是那里的代码:

 import React from "react"; import ReactDOM from "react-dom"; import App from "./App"; import FirebaseContext from "./context/firebase"; import { firebaseApp, analytics, FieldValue } from "./lib/firebase"; ReactDOM.render( <FirebaseContext.Provider value={{ firebaseApp, analytics, FieldValue }}> <App /> </FirebaseContext.Provider>, document.getElementById("root") );

I cant seem to figure out the problem.我似乎无法弄清楚问题所在。 I have also tried to delete package.lock.js and node_module, cleared cache and reinstalled node_module but still no luck.我也尝试删除 package.lock.js 和 node_module,清除缓存并重新安装 node_module,但仍然没有运气。 Woulc anyone help me out with this one?有人能帮我解决这个问题吗?

Thank you.谢谢你。

First of all, you're mixing two different syntax.首先,您混合了两种不同的语法。 The web version 8 which is the dot notation of Firestore and web version 9 which is the modular syntax of Firestore. Web 版本 8 是 Firestore 的点表示法,Web 版本 9 是 Firestore 的模块化语法。 If you still want to use the web version 8 then you need to use the compat version when using the latest package of Firebase.如果您仍想使用 web 版本 8,那么您需要在使用最新的 Firebase 包时使用compat版本。 See the following sample code:请参阅以下示例代码:

firebase.js: firebase.js:

import firebase from 'firebase/compat/app';
import 'firebase/compat/firestore';
import 'firebase/compat/analytics';
import 'firebase/compat/auth';
    
const firebaseConfig = {
    ...
};

const firebaseApp = firebase.initializeApp(firebaseConfig);

const db = firebaseApp.firestore();
const analytics = firebaseApp.analytics();
const auth = firebase.auth();

const FieldValue = db.FieldValue;

export { db, analytics, FieldValue, auth };

index.js : index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import FirebaseContext from "./context/firebase";
import { db, analytics, FieldValue, auth } from "./lib/firebase";

ReactDOM.render(
  <FirebaseContext.Provider value={{ db, analytics, FieldValue, auth }}>
    <App />
  </FirebaseContext.Provider>,
  document.getElementById("root")
);

seed.js :种子.js

for (let k = 0; k < users.length; k++) {
    db.collection("users").add(users[k]);
}

// eslint-disable-next-line prefer-const
for (let i = 1; i <= 5; ++i) {
    db
    .collection("photos")
    .add({
    photoId: i,
    userId: "2",
    imageSrc: `/images/users/raphael/${i}.jpg`,
    caption: "Saint George and the Dragon",
    likes: [],
    comments: [
      {
        displayName: "dali",
        comment: "Love this place, looks like my animal farm!",
      },
      {
        displayName: "orwell",
        comment: "Would you mind if I used this picture?",
      },
    ],
    userLatitude: "40.7128°",
    userLongitude: "74.0060°",
    dateCreated: Date.now(),
    });
}

For more information, you may check these documentation:有关更多信息,您可以查看以下文档:

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 类型错误:firebase.firestore 不是反应 js 和 firebase 应用程序中的 function - TypeError: firebase.firestore is not a function in react js and firebase app 未捕获的类型错误:firebase.firestore()…set 不是 HTMLButtonElement 的 function。<anonymous></anonymous> - Uncaught TypeError: firebase.firestore()…set is not a function at HTMLButtonElement.<anonymous> Firebase:TypeError:firebase.firestore 不是函数 - Firebase: TypeError: firebase.firestore is not a function TypeError: firebase.firestore() is not a function web javascript - TypeError: firebase.firestore () is not a function web javascript Firebase.firestore() 不是 function? - Firebase.firestore() is not a function? Javascript/Firestore: Uncaught (in promise) TypeError: firebase.firestore(...).collection(...).doc(...).collection(...).set 不是函数 - Javascript/Firestore: Uncaught (in promise) TypeError: firebase.firestore(...).collection(...).doc(...).collection(...).set is not a function firebase.firestore 不是 function 版本 9 - firebase.firestore is not a function version 9 firebase.firestore 不是 function 与 Node.js - firebase.firestore is not a function with Node.js 尝试初始化 Cloud Firestore 时,firebase.firestore() 不是函数 - firebase.firestore() is not a function when trying to initialize Cloud Firestore Firestore onSnapshot - firebase.firestore 不是 function - 无法解析模块说明符“firebase” - Firestore onSnapshot - firebase.firestore is not a function - Failed to resolve module specifier “firebase”
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM