画面がフリーズして、サーバーが立ち上がらない。

[saitou-daiki]

①コンソールでエラーが出ているが、サーバーが立ち上がらない。ずっと画面が待機中のまま、丸い印がくるくるしている。 ②起きている問題（起きている現象の詳細/エラーメッセージ/スクリーンショット） 画面がくるくるしたまま立ち上がりませんでした。 const db = firebase.firestory() ここの部分でエラーが出てるので、configの設定の仕方が悪いきがしてます。

③ソースコード（関連するソースコード/全ソースコード）

firebase.jsの中のコードです。 import firebase from 'firebase/app' import 'firebase/firestore'

if(!firebase.apps.length){ const firebaseConfig = { apiKey: "AIzaSyAmz_XkFD4bUdFG-qjfdX9hTnbYzH5DITI", authDomain: "sns-app-19efd.firebaseapp.com", databaseURL: "https://sns-app-19efd.firebaseio.com", projectId: "sns-app-19efd", storageBucket: "sns-app-19efd.appspot.com", messagingSenderId: "460586126881", appId: "1:460586126881:web:9f547edb779060ce2bdd60", measurementId: "G-DL5VRRDJVN" }; // Initialize Firebase firebase.initializeApp(firebaseConfig); }

const db = firebase.firestory()

export { firebase, db

}

.envは初めは使ってやっていましたが、うまくいかなかったのでデータを元に戻しました。 念の為ですが、firestoryで定義しているデータです。

こちらがposts.vueのデータです。

④問題解決するために試したこと（コードもあれば追記） npm run devでサーバーを立ち上げ直した。 念の為、パソコンを再起動した。 .envを使わずに、データを定義してみた。 firestoryで定義しているデータを見直した。 グーグルアナリティクスの設定を初めはありにしてたので、なしに戻した。 ⑤問題について自分なりに考えたこと（デバッグ結果/検索結果/自分なりの原因予想） firebaseConfigの中のデータをいじると、エラーメッセージが表示されるので、Configの中のデータが何かおかしくて通信がうまくいかないと考えたのですが、それ以上はわかりませんでした。 ⑥当該コンテンツを購入したnoteのアカウント @saitou311099 ⑦noteのどのあたりまでやったのか ３−３ 環境変数の定義が終わって次のところぐらいです。

[saitou-daiki]

script> // Your web app's Firebase configuration var firebaseConfig = { apiKey: "AIzaSyAmz_XkFD4bUdFG-qjfdX9hTnbYzH5DITI", authDomain: "sns-app-19efd.firebaseapp.com", databaseURL: "https://sns-app-19efd.firebaseio.com", projectId: "sns-app-19efd", storageBucket: "sns-app-19efd.appspot.com", messagingSenderId: "460586126881", appId: "1:460586126881:web:2e429166e3f525fb2bdd60" }; // Initialize Firebase firebase.initializeApp(firebaseConfig);

[saitou-daiki]

データがずれてしまったので、投稿しなおしました。

<template>
 <div>
   <div class="posts overflow-scroll mb-24">
   </div>
 </div>
</template>

<script>
import Post from '~/components/Post.vue'
import { db } from '~/plugins/firebase'

export default {
  components: {
    Post
  },
  data (){
    return {
      posts: []
    }
  },
  mounted () {
    db.collection('posts').get()
      .then((snapshot) => {
        snapshot.forEach(()=> {
          this.posts.push(doc.data())
          console.log(doc.data())
        })
      })

 }
}
</script>

[saitou-daiki]

マークダウン記法わかってなかったので、こちらも再掲します。

import firebase from 'firebase/app'
import 'firebase/firestore'

if(!firebase.apps.length){
  const firebaseConfig = {
    apiKey: "AIzaSyAmz_XkFD4bUdFG-qjfdX9hTnbYzH5DITI",
    authDomain: "sns-app-19efd.firebaseapp.com",
    databaseURL:  "https://sns-app-19efd.firebaseio.com",
    projectId: "sns-app-19efd",
    storageBucket: "sns-app-19efd.appspot.com",
    messagingSenderId: "460586126881",
    appId: "1:460586126881:web:9f547edb779060ce2bdd60",
    measurementId: "G-DL5VRRDJVN"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
}

const db = firebase.firestory()

export {
  firebase,
  db
}

[cohki0305]

すみません、回答めっちゃ遅れてました... Slackと連携していたのですが、通知が飛んでいなかったようです 🙇 本当すみません

[cohki0305]

const db = firebase.firestory()

firebase が firestory になっているのが原因だと思います！ エラーログに firestory is not a function と出ていたのでわかりました！