web-dev-qa-db-ja.com

firebase.authは関数ではありません

Firebaseおよびfirebase-adminでWebpackを使用しています。

Firebaseをインストールするには、実行しました

npm install --save firebase

を使用してfirebaseをインポートしています。

import * as firebase from 'firebase/app'
import 'firebase/auth'

私も試しました

import * as firebase from 'firebase'

そして、私は試した

const firebase = require('firebase')

ウェブスタートガイド で提案されているように

firebase.auth()を使用しようとするとエラーが発生します

console.js:32 TypeError:firebase.authは関数ではありません

デバッガーを使用してfirebaseを検査すると、実際にはauth関数がないことがわかります。

> firebase
 {__esModule: true, initializeApp: ƒ, app: ƒ, Promise: ƒ, …}

Webpackを使用してauth()を関数として含めるにはどうすればよいですか?

ありがとう。

編集:これは、notコメント内の質問の複製です。その質問は、認証サービス自体ではなく、認証サービスのメンバーであるメソッドを指します。

32
Eric Conner

OK、私のnode_modulesディレクトリを削除してすべてを再インストールすることでこれを修正しました。

また、私は次のようにfirebaseをインポートしています:

import firebase from 'firebase'
require('firebase/auth')

知りません。

¯\_(ツ)_/¯
34
Eric Conner

私は言ったエラーを取得し続けました

「TypeError:firebase.authは関数ではありません」

Authオブジェクトが表示されるようになりましたが、私がやったことは、モジュールを異なる順序でインストールすることでした。

モジュールを初めてインストールしたとき(これは、authオブジェクトが表示されなかったときです):

// this seems to confuse things with the auth object when installed in this order
$ npm install firebase-admin --save
$ npm install firebase --save

Npmフォルダーを削除し、ゼロから始めましたが、今回はインストール順序を逆にしました。

// for some reason this worked and now I can access the auth object
$ npm install firebase --save
$ npm install firebase-admin --save

私は他に何もしませんでした。最初にfirebaseをインストールし、次にfirebase-adminをインストールすることで、インストールの順序を逆にしただけです。

これが他の人にも役立つことを願っています。

詳細についてはこちらをご覧ください

17
Lance Samaria

あなたはあなたの問題を分類したことを知っていますが、元の問題に対する本当の答えはありません。問題はnode_modulesではなく、コンポーネントをインポートする方法にありました。

コンポーネントES6の方法でエクスポートするときは、通常export default () => { console.log('default component export'); };を実行します

defaultはここのキーワードです。import firebase from 'firebase'のようにコンポーネントES6をインポートすると、エクスポートされたオブジェクトからdefaultプロパティを取得します。

上記の例を念頭に置いて、ここであなたが間違ったことをしました。

ES6を使用:

import * as firebase from 'firebase'

console.log(firebase.auth) // Undefined
console.log(firebase.default.auth) // Function

ES5を使用:

var firebase = require('firebase')

console.log(firebase.auth) // Undefined
console.log(firebase.default.auth) // Function

.defaultに注意してください

これがそもそも何が間違っていたかを説明するのに役立つことを願っています。

14
Joao Lopes

単に追加する>

import firebase from '@firebase/app';
require('firebase/auth');

あなたのプロジェクトに

この問題の背後には多くの根本原因がありますが、このような単純なものも当てはまる可能性があります。

JSコード内で使用していますが、authとdbにjsファイルを含めるのを忘れていました。

修正前。

<!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/6.1.1/firebase-app.js"></script>

修正後。

<!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/6.1.1/firebase-app.js"></script>

<!-- Add Firebase products that you want to use -->
<script src="https://www.gstatic.com/firebasejs/6.1.1/firebase-auth.js"></script>

<script src="https://www.gstatic.com/firebasejs/6.1.1/firebase-database.js"></script>
3
Gayan Pathirage

私もこれに遭遇しました。私の問題は、firebaseモジュールと同様に@firebaseがインストールされたnpmモジュールでした。 JavaScriptコードで「require(“ firebase”)」を使用してfirebaseが必要な場合、何らかの理由でwebpackが代わりに@firebaseをバンドルしました。

@firebaseには、デフォルトでは認証やデータベースなどが含まれていません...モジュール式なので、個別に要求できます。そのため、auth()を呼び出したときに上記のエラーを受け取りました。

修正するには、@ firebaseを削除するか、必要なときに正しいfirebaseへのフルパスを追加するだけです。

require( ‘/ path/to/node_modules/firebase/firebase.js’)

2
Troy

同じ問題を抱えていたのは、バージョンの問題が原因だと思います。 node_modulesおよびwebpackで生成されたものをすべて削除して解決し、 here からバージョンを取得します。
ところで、公式のドキュメントのように機能するはずなので、非常に奇妙な動作だと思います。

2
CenyGG

Node_modulesフォルダーを削除する必要はありませんでした。 node_mudules内に「@firebase」サブフォルダーと「firebase」サブフォルダーの両方があるかどうかを確認してください。その場合、requireステートメントのパスを「firebase」に「./node_modules/firebase」に変更します

そして次の行を作ります。 require( './ node_modules/firebase/firebase-auth');

0
Treasure

私は同じ問題を抱えていて、このように解決しました:

<script src = "https://www.gstatic.com/firebasejs/6.5.0/firebase-app.js"> </script>
<script src = "https://www.gstatic.com/firebasejs/6.5.0/firebase-auth.js"> </script>
<script>
// Firebase settings of your web application
var firebaseConfig = {
apiKey: "your apikey",
authDomain: "hackatonteleton.firebaseapp.com",
databaseURL: "https://name-database.firebaseio.com",
projectId: "name-projectid",
storageBucket: "name.appspot.com",
messagingSenderId: "730018138942",
Application ID: "1: 730018138942: web: eb12fac2f91fb17f"
};
// Initialize Firebase
firebase.initializeApp (firebaseConfig);
const auth = firebase.auth ();
</script>

あなたが気づく違いは、彼らが必要とすることです:

<script src = "https://www.gstatic.com/firebasejs/6.5.0/firebase-auth.js"> </script>

関数を初期化します

const auth = firebase.auth ();`enter code here`

私のソリューション:ノード、NPM、NVMを完全に削除して再インストールする

この問題は、過去に数回発生しました(node_modulesを更新またはインストールしようとしたときはいつでも)。文字通り上記のすべてを試しました。常にランダムに動作し始めているように見え、次回エラーが発生したときに以前に文書化されたソリューションを使用できませんでした。

取得するためにmacOSで行った奇妙なハックがあった初期にFirebaseを使用し始めてから、キャリーオーバーの問題が発生した可能性があると思いますfirebaseが正常に動作するようにします。

このソリューションは、基本的にMacからnode/npm/nvmのトレースを完全に削除し、firebaseが実行するノードの正確なバージョンを使用するために再インストールします。これはnvmを使用するため、異なるノードバージョンを必要とする他のプロジェクトがある場合は、その場でノードバージョンを切り替えることができます。

1.既存のNodeモジュールを削除します

プロジェクトのフォルダーで、node_modulesフォルダーをすべて削除します。

2.ノードの削除

これは、手動でノードを削除するために使用したチュートリアルです 。初期の頃は、ノードを別のディレクトリにインストールするために(権限の問題のため)何かを変更する必要があったことを覚えています。そのため、これらのファイルとフォルダを他の領域から削除するためにコンピューターで追加検索を行いました。

3. NPMを削除します

これは、npmのトレースを確実に削除するために使用したチュートリアルです

4. NVMを削除します

これは、NVMを手動で削除するために使用したチュートリアルです

5.再起動

すべてを削除し、bashを再起動(または安全のためにMacを再起動)した後、コンソールにnodenpm、およびnvmと入力すると、command not foundが返されます。

6.ノードの再インストール、NVMのみを使用したNPM

NVMでは、特定のバージョンのノードをインストールできます。 firebase-functionsnode 8ランタイム(ベータ)を使用しているため、リストされたターゲットバージョンのノード8をインストールしました(現時点では- ノード8.11.1 )。これはまだベータ版であり、firebase関数はこの記事の執筆時点でノード6.11.5を使用しています。

ノードのインストール手順、nvmを使用したnpm

7. NPMを手動で更新する

NVMは古いバージョンのnpmをインストールしました。このコマンドは、NPMを最新バージョンに更新します。

npm install npm@latest -g

8.モジュールのインストール

念のためにターミナルアプリを再起動してから、プロジェクトフォルダーに戻り、npm installコマンドを実行します。

9.再構築および再展開

Webpackを使用している場合は、プロジェクトを再ビルドします。次に、ローカルに展開または提供します。

このプロセスで問題は解決しました。うまくいけば、ハックをする必要はありません。私がする必要があるのは、いくつかのクリーンアップだけだったようです。

0
Matthew Rideout

Nodeで実行され、firebasefirebase-adminの両方が必要な場合、これは私にとってはうまくいきます:

最初にfirebaseをインストールし、次にfirebase-adminをこの順序でインストールします。

その後、次のように使用します:

const app = require('@firebase/app');
require('@firebase/auth');
require('@firebase/firestore');

const firebase = app.firebase

firebase.initializeApp({…})

const auth = firebase.auth()
const db = firebase.firestore()
0
Gerardlamo