如何使用ES6语法将Firebase Firestore导入到create-react-app项目中

Question

我遇到了麻烦，无法将Firebase Firestore与基本的create-react-app样板代码配合使用。有人有可用的示例吗？ 开始文档仅解释如何使用require语句设置它，而我想使用ES6导入。

const firebase = require("firebase");
// Required for side-effects
require("firebase/firestore");

ES6等价于require('firebase/firestore')是什么？

- Kayce Basques

Answer 1

这对我有用：

import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/datastore';

来自https://github.com/firebase/reactfire#using-the-firebase-js-sdk-in-react

- Artur Carvalho

---

我也可以。 - songololo

Answer 2

我的问题在于我试图使用ES6语法。Firebase文档说要通过类似以下方式访问:

const firebase = require('firebase');
require('firebase/firestore');

我想要做的事情是这样的：

import * as Firebase from 'firebase';
import Firestore from 'firebase/firestore';

似乎那个方法并没有生效，但这个可以：

import * as Firebase from 'firebase';
require('firebase/firestore');

我不喜欢混用import和require，但目前来说还可以。

- Kayce Basques

Answer 3

两个月后，这对我有用：

import * as firebase from 'firebase';
import '@firebase/firestore';

它也可以在没有“@”符号的情况下工作。

这是我的package.json文件中的依赖项部分：

{
    ...
    "dependencies": {
        "@firebase/app": "^0.2.0",
        "@firebase/firestore": "^0.4.1",
        "firebase": "^4.13.1",
        "react": "^16.3.2",
        "react-dom": "^16.3.2",
        "react-router": "^4.2.0",
        "react-router-dom": "^4.2.2",
        "react-scripts": "1.1.4"
    },
    ...
}

我开始跟随 npmjs.com 上 firebase 包的 说明。在它的依赖项中，我找到了 @firebase/firestore，并尝试按照其说明进行导入，如下所示：

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

然而，我尝试使用导入firebase的方法失败了——我能够初始化我的应用程序，但尝试执行firebase.auth().signInWithPopup(provider)时会出现错误:

TypeError: WEBPACK_IMPORTED_MODULE_0__firebase_app.default.auth不是一个函数

- carbonturtle

Answer 4

我为Firebase创建了一个配置文件：

import * as firebase from 'firebase';

const config = { /* COPY THE ACTUAL CONFIG FROM FIREBASE CONSOLE */
    apiKey: "apiKey",
    authDomain: "domen.firebaseapp.com",
    databaseURL: "https://domen.firebaseio.com",
    projectId: "lavs-mercury",
    storageBucket: "",
    messagingSenderId: "id"
};

export default firebase.initializeApp(config);

然后我只需要将这个模块导入到我想要使用的文件中。例如：

import * as actionTypes from './actionTypes';
import firebase from "../../firebase-module";

export const logout = () => {
    firebase.auth().signOut();
    return {
        type: actionTypes.LOGOUT
    }
};

- Ihor Lavs

---

谢谢回复，但我正在寻求有关如何设置新的 Firebase Firestore（目前处于测试版）的帮助。您的配置似乎没有引用Firestore。 - Kayce Basques

Answer 5

这对我有用。

确保你已经安装了 npm install --save firebase

导入 'firebase/firestore';

- Arif Jamal

Answer 6

我曾经遇到过同样的问题，我通过将 Firebase 版本降级至 7 版本来解决它。

"firebase": "^7.7.0"

- Yonatan Dawit