web-dev-qa-db-ja.com

firebase.firestore（）は、Cloud Firestoreを初期化する際の関数ではありません

Firebase Cloud Firestoreを初期化しようとすると、次のエラーが発生しました。

Uncaught TypeError：WEBPACK_IMPORTED_MODULE_0_firebase。firestoreは関数ではありません

以前にnpm install firebase --saveでfirebaseをインストールしました。

import * as firebase from 'firebase';
import router from '../router';

const config = {
        apiKey: "a",
        authDomain: "a",
        databaseURL: "a",
        projectId: "a",
        storageBucket: "a",
        messagingSenderId: "a"
};
if(!firebase.apps.length){
  firebase.initializeApp(config);
  let firestore = firebase.firestore();
}
javascriptfirebasegoogle-cloud-firestore
38
Eyk Rehbein

複数のライブラリをインポートして修正しました：firebaseおよびfirebase/firestore。これは、firebaseコアライブラリにFirestoreライブラリが本質的に含まれていないためです。それを修正するための完全なコードは次のとおりです。

import * as firebase from 'firebase';
import 'firebase/firestore';
45
Eyk Rehbein

まず、Firebaseの最新バージョンがあることを確認します。

npm install [email protected] --save

次に、firebaseとfirestoreの両方を追加します。

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

Firebaseアプリを初期化します。

firebase.initializeApp({
  apiKey: '### FIREBASE API KEY ###',
  authDomain: '### FIREBASE AUTH DOMAIN ###',
  projectId: '### CLOUD FIRESTORE PROJECT ID ###'
});

// Initialize Cloud Firestore through Firebase
var db = firebase.firestore();

ソース： https://firebase.google.com/docs/firestore/quickstart?authuser=

12
RM de Vos
import { firebase } from '@firebase/app';
import '@firebase/firestore'

認証も使用している場合

import '@firebase/auth';
5
Tim Arney

これがAngularアプリをFirestoreにデプロイするときに同じ問題に直面する人に役立つことを願っています。

Angular 8プロジェクトでは、Firestoreにデプロイするときに同じエラーが発生しました。別のモジュールAngularFirestoreModuleを追加して修正しました。

App.module.tsは次のようなものです。

...
import { AngularFireModule } from '@angular/fire';
import { AngularFirestore, AngularFirestoreModule } from '@angular/fire/firestore'; // << Note AngularFirestoreModule !!!
import { AngularFireDatabaseModule } from '@angular/fire/database';
...

imports: [
    BrowserModule,
    FormsModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFirestoreModule,
    AngularFireDatabaseModule,
...

package.json：

...
"dependencies": {
    "@angular/animations": "~8.2.2",
    "@angular/common": "~8.2.2",
    "@angular/compiler": "~8.2.2",
    "@angular/core": "~8.2.2",
    "@angular/fire": "^5.2.1",
    "@angular/forms": "~8.2.2",
    "@angular/platform-browser": "~8.2.2",
    "@angular/platform-browser-dynamic": "~8.2.2",
    "@angular/router": "~8.2.2",
    "ajv": "^6.10.2",
    "bootstrap-scss": "^4.3.1",
    "core-js": "^2.5.4",
    "firebase": "^6.4.0",
...

更新：他のホスティングプロバイダーにデプロイしたとき、これは役に立ちませんでした。この場合、元のfirebaseライブラリを追加しましたが、機能しました。

import { firestore } from 'firebase';
1
Atilla Baspinar

Firebaseの以前のバージョンから更新していて、この問題について問題を解決している場合は、const Firebase = require('firebase/firebase')の代わりにrequire('firebase/app')を試してください

1
bytecode

同じエラーが発生し、公式Webサイトをフォローしようとしましたが、機能しませんでした。その後、私はエラーをグーグルで検索し、この投稿に行きました。

私は試した：

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

しかし、私にとってはうまくいきませんでしたが、/firebaseを最初の行import * as firebase from 'firebase/firebase';に追加しましたが、すべてが完全に機能しています。

requireでも機能します：

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

万が一、コードが魔術の下にあり、import firebase/firestoreが機能しない場合は、直接コードを含めてください。

import '@firebase/firestore/dist/esm/index';

存在しない場合：

npm install @firebase/firestore
1
Jose A

Electron-webpackを使用しているユーザー向けに入手したと思います。ソリューションは、コードミラーのインポートに関連する投稿からでした。 https://github.com/electron-userland/electron-webpack/issues/81

これは私のために働いた。

// package.json
{
  //...
  "electronWebpack": {
    "whiteListedModules": [
      "firebase"
    ]   
  },
  //...
}
0
btd

node_modulesディレクトリとpackage-lock.jsonを削除してからnpm installを実行すると、修正されました。

https://github.com/angular/angularfire2/issues/188

0
Austris Cirulnieks

あなたが私のようであり、TypeScriptで入力されたすべてのものが好きな場合（それは目的です）、あなたは試すことができます：

import * as firebase from "nativescript-plugin-firebase";
import { User, firestore } from "nativescript-plugin-firebase";

import * as firebaseapp from "nativescript-plugin-firebase/app";

そのため、次のようなことができます。

firebase.getCurrentUser().then((user: User) => { /* something */ });

const mycollection : firestore.CollectionReference = firebaseapp.firestore().collection("mycollection");
0
Bruno Leitão