エラー「GoogleAuthProvider is not a constructor」が出た時の対処法

問題

GoogleのOAuth認証を実現しようとsignInWithPopupを宣言したところ
以下のようなエラーが発生。

JavaScript による Google を使用した認証  |  Firebase

firebase.google.com

出力されたエラー

TypeError: _firebase__WEBPACK_IMPORTED_MODULE_14__.auth.GoogleAuthProvider is not a constructor

Firebaseは正しくインポートしているはずだが。。。

原因

原因はGoogleAuthProvider()のインポート元にあった。

import { auth, db } from '../../firebase';
var provider = auth.GoogleAuthProvider();
auth.signInWithPopup(provider)
.then((result) => {
...
}

私はfirebaseのサービスインデックスを’../../firebase’に作成していたが、

auth.GoogleAuthProvider()は

インポート元が違っていたことでこのエラーが発生していると思われる。

解決策

GoogleAuthProvider()のインポート先を以下のように変えてあげることで解決。

import { auth, db } from '../../firebase';
var provider = new firebase.auth.GoogleAuthProvider();
auth.signInWithPopup(provider)
.then((result) => {
...
}

firebase.auth.GoogleAuthProvider is not a constructor

I'm trying to use google sign using firebase in the Vue framework. I don't know what the error is this can anyone help me with this. vue.runtime.esm.js?2b0e:188...

stackoverflow.com