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コメント内の質問の複製です。その質問は、認証サービス自体ではなく、認証サービスのメンバーであるメソッドを指します。
OK、私のnode_modules
ディレクトリを削除してすべてを再インストールすることでこれを修正しました。
また、私は次のようにfirebaseをインポートしています:
import firebase from 'firebase'
require('firebase/auth')
知りません。
¯\_(ツ)_/¯
私は言ったエラーを取得し続けました
「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をインストールすることで、インストールの順序を逆にしただけです。
これが他の人にも役立つことを願っています。
あなたはあなたの問題を分類したことを知っていますが、元の問題に対する本当の答えはありません。問題は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
に注意してください
これがそもそも何が間違っていたかを説明するのに役立つことを願っています。
単に追加する>
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>
私もこれに遭遇しました。私の問題は、firebaseモジュールと同様に@firebaseがインストールされたnpmモジュールでした。 JavaScriptコードで「require(“ firebase”)」を使用してfirebaseが必要な場合、何らかの理由でwebpackが代わりに@firebaseをバンドルしました。
@firebaseには、デフォルトでは認証やデータベースなどが含まれていません...モジュール式なので、個別に要求できます。そのため、auth()を呼び出したときに上記のエラーを受け取りました。
修正するには、@ firebaseを削除するか、必要なときに正しいfirebaseへのフルパスを追加するだけです。
require( ‘/ path/to/node_modules/firebase/firebase.js’)
同じ問題を抱えていたのは、バージョンの問題が原因だと思います。 node_modules
およびwebpack
で生成されたものをすべて削除して解決し、 here からバージョンを取得します。
ところで、公式のドキュメントのように機能するはずなので、非常に奇妙な動作だと思います。
Node_modulesフォルダーを削除する必要はありませんでした。 node_mudules内に「@firebase」サブフォルダーと「firebase」サブフォルダーの両方があるかどうかを確認してください。その場合、requireステートメントのパスを「firebase」に「./node_modules/firebase」に変更します
そして次の行を作ります。 require( './ node_modules/firebase/firebase-auth');
私は同じ問題を抱えていて、このように解決しました:
<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`
この問題は、過去に数回発生しました(node_modulesを更新またはインストールしようとしたときはいつでも)。文字通り上記のすべてを試しました。常にランダムに動作し始めているように見え、次回エラーが発生したときに以前に文書化されたソリューションを使用できませんでした。
取得するためにmacOSで行った奇妙なハックがあった初期にFirebaseを使用し始めてから、キャリーオーバーの問題が発生した可能性があると思いますfirebaseが正常に動作するようにします。
このソリューションは、基本的にMacからnode/npm/nvmのトレースを完全に削除し、firebaseが実行するノードの正確なバージョンを使用するために再インストールします。これはnvmを使用するため、異なるノードバージョンを必要とする他のプロジェクトがある場合は、その場でノードバージョンを切り替えることができます。
プロジェクトのフォルダーで、node_modules
フォルダーをすべて削除します。
これは、手動でノードを削除するために使用したチュートリアルです 。初期の頃は、ノードを別のディレクトリにインストールするために(権限の問題のため)何かを変更する必要があったことを覚えています。そのため、これらのファイルとフォルダを他の領域から削除するためにコンピューターで追加検索を行いました。
これは、npmのトレースを確実に削除するために使用したチュートリアルです
これは、NVMを手動で削除するために使用したチュートリアルです
すべてを削除し、bashを再起動(または安全のためにMacを再起動)した後、コンソールにnode
、npm
、およびnvm
と入力すると、command not found
が返されます。
NVMでは、特定のバージョンのノードをインストールできます。 firebase-functionsnode 8ランタイム(ベータ)を使用しているため、リストされたターゲットバージョンのノード8をインストールしました(現時点では- ノード8.11.1 )。これはまだベータ版であり、firebase関数はこの記事の執筆時点でノード6.11.5を使用しています。
NVMは古いバージョンのnpmをインストールしました。このコマンドは、NPMを最新バージョンに更新します。
npm install npm@latest -g
念のためにターミナルアプリを再起動してから、プロジェクトフォルダーに戻り、npm install
コマンドを実行します。
Webpackを使用している場合は、プロジェクトを再ビルドします。次に、ローカルに展開または提供します。
このプロセスで問題は解決しました。うまくいけば、ハックをする必要はありません。私がする必要があるのは、いくつかのクリーンアップだけだったようです。
Nodeで実行され、firebase
とfirebase-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()