Firestore onSnapshot - firebase.firestore 不是函数 - 无法解析模块说明符“firebase”答案

【问题标题】：Firestore onSnapshot - firebase.firestore is not a function - Failed to resolve module specifier "firebase"Firestore onSnapshot - firebase.firestore 不是函数 - 无法解析模块说明符“firebase”
【发布时间】：2020-08-23 12:39:10
【问题描述】：

我只是想学习 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 文件中，并且错误仍然存在。

【问题讨论】：

标签： javascript firebase google-cloud-firestore

【解决方案1】：

删除：

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

从我发现的 stackoverflow 帖子中，保留 firestore 链接似乎可以解决问题。

【讨论】：

【解决方案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 重新安装所有需要的东西。此后它完美运行。

【讨论】：