Firestore onSnapshot - firebase.firestore 不是 function - 無法解析模塊說明符“firebase”

Question

我只是想學習 firebase，我想使用 onSnapshot 所以從“實時數據庫”切換到“firestore”。 切換后，我復制了這個樣板代碼：

document.addEventListener("DOMContentLoaded", evt=> {
  const app = firebase.app();
  const db = firebase.firestore();

  db.collection('users')
    .onSnapshot((snapshot) => {
      console.log(`Received doc snapshot: ${snapshot}`);
    }, (error) => {
      console.log(`Encountered error: ${error}`);
    });

});

但是我得到了“firebase.firestore 不是函數”。 我在這里找到了解決方案： https://stackoverflow.com/a/50684682/4907950這只是添加：

import * as firebase from 'firebase';
import 'firebase/firestore';

但是，然后我得到：“未捕獲的類型錯誤：無法解析模塊說明符“firebase”。相對引用必須以“/”、“./”或“../”開頭。”

編輯：還值得注意的是，我已將<script defer src="/__/firebase/7.14.2/firebase-firestore.js"></script>添加到我的 HTML 文件中，並且錯誤仍然存在。

Answer 1

刪除：

import * as firebase from 'firebase';
import 'firebase/firestore';

從我發現的stackoverflow帖子中，保留firestore鏈接似乎可以解決問題。

Answer 2

出於某種原因，我不得不使用完整的 URL 並將它們放在<BODY>標記的頂部，如下所示：

<body>
  <script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-database.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-messaging.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-storage.js"></script>

  <script src="app.js"></script>
</body>

我還必須使用 Firebase CLI 重新安裝所有需要的東西。 此后它工作得很好。

Firestore onSnapshot - firebase.firestore 不是 function - 無法解析模塊說明符“firebase”

問題描述

2 個解決方案

解決方案1
1 2020-05-08 02:30:37

解決方案2
1 2020-05-08 03:16:45

Firestore onSnapshot - firebase.firestore 不是 function - 無法解析模塊說明符“firebase”

問題描述

2 個解決方案

解決方案1 1 2020-05-08 02:30:37

解決方案2 1 2020-05-08 03:16:45

解決方案1
1 2020-05-08 02:30:37

解決方案2
1 2020-05-08 03:16:45