Nuxt+firebaseのエラー対処 環境変数の設定編

最終更新日:2020年2月16日 Nuxt

Nuxtでfirebaseを扱おうとしたら、以下のようなエラーが出たので解決策を備忘録に残しておく。

FirebaseError: projectId must be a string in FirebaseApp.options

今回は、Nuxtにて会員登録の機能を実装するため、firebaseを導入し、以下のようにfirebase_config.jsと.envにて、firebaseの設定を行う。

そして、signup.vueにて会員登録ページを作成する。

 

結論から言うと、上記のエラーは環境変数の設定に問題があったために発生したようだ。

以前、vuexで会員登録ページを作ったことがあったので、そのときと同じように作成したのがまずかった。

Nuxtで環境変数の設定を行う場合は、最初に以下コマンドで@nuxtjs/dotenvをインストールする必要がある。

npm install --save-dev @nuxtjs/dotenv

それから、再度npm run devで開発サーバを起動する。

そして、nuxt.config.jsのpluginsとmodulesのプロパティにて、以下のように設定を追加する。

ここで、プロジェクトルートに配置していたfirebase_config.jsファイルは、pluginsのフォルダに入れる。

あとは、signup.vueにおいて、firebase_config.jsをインポートする際のパスを正しく記載すればエラーが解消され、会員登録ページが表示される。

参考サイト

https://qiita.com/IZUMIRU/items/0b0771c3a83647d4997e

https://github.com/nuxt-community/dotenv-module

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です