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

Question

我无法让 Firebase Firestore 使用基本的 create-react-app 样板。有人有工作样本吗？

Get Started 文档仅解释了如何使用 require 语句进行设置，而我想使用 ES6 导入。

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

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

Answer 1

我为 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
    }
};

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，但现在已经足够好了。

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"
    },
    ...
}

我开始遵循 instructions on npmjs.com for the firebase package. In its dependencies, I found @firebase/firestore，并尝试按照这些说明进行操作，说明要像这样导入：

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

但是，这种导入 firebase 的方法对我不起作用——我能够初始化我的应用程序，但尝试执行 firebase.auth().signInWithPopup(provider) 导致错误：

TypeError: WEBPACK_IMPORTED_MODULE_0__firebase_app.default.auth is not a function

Answer 4

这对我有用：

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

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

Answer 5

这对我有用。

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

进口'firebase/firestore';

Answer 6

我遇到了同样的问题，我通过将 firebase 版本降级到 7 解决了这个问题。

"firebase": "^7.7.0"

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

How to import Firebase Firestore into a create-react-app project using ES6 syntax

firebase

ecmascript-6

reactjs

es6-modules

create-react-app