Flutter Web Firebase TypeError：dart.global.firebase.firestore 不是函数答案

【问题标题】：Flutter Web Firebase TypeError：dart.global.firebase.firestore 不是函数
【发布时间】：2020-11-24 15:37:27
【问题描述】：

我正在尝试在我的 Flutter Web 项目中使用 Firebase。
但应用无法运行并显示此消息。

TypeError: dart.global.firebase.firestore is not a function
at Object.firestore$ [as firestore]

我的index.html 看起来像这样。

<script src="https://www.gstatic.com/firebasejs/7.17.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.17.1/firebase-analytics.js"></script>

<script>
  // Your web app's Firebase configuration
  var firebaseConfig = {
    apiKey: "MY_API_KEY",
    authDomain: "MY_AUTHDOMAIN",
    databaseURL: "MY_URL",
    projectId: "MY_ID",
    storageBucket: "MY_BUCKET",
    messagingSenderId: "MY_ID",
    appId: "MY_APPID",
    measurementId: "MY_ID"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();
</script>

有人知道如何解决这个问题吗？

【问题讨论】：

请分享您的pubspec.yaml。

标签： firebase flutter-web

【解决方案1】：

作为mentioned in the docs，在index.html中添加这一行：

  <script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-firestore.js"></script>

【讨论】：

真的吗？它对我有用。
这是做什么的，我想知道为什么官方链接上没有提到它？有谁知道？请解释一下
我还做了一个颤振升级以及这个加载的网络应用程序
文档中没有提到它。要初始化，请添加脚本 firebase-app.js，但如果您想要使用 firestore 数据库，请添加 firebase-firestore.js - 然后您需要对您想要的任何其他产品执行相同的操作，例如分析、消息传递、存储等。我相信就像你在香草 js 中所做的那样
添加到答案中，在我的情况下，更新上述行后，我不得不停止正在运行的项目并再次运行它以使其工作。

【解决方案2】：

我有同样的事情，要修复它只需在底部的 index.html 中添加：

...
<script src="https://www.gstatic.com/firebasejs/7.17.1/firebase-firestore.js"></script>
  <script src="main.dart.js" type="application/javascript"></script>
...

只要确保它在之后：

....
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();
...

【讨论】：

如果我把它放在 firebase.initializeApp() 之后，我会得到 Firebase: No Firebase App '[DEFAULT]' has created - call Firebase App.initializeApp()
这是在 dart 代码中，所以在调用任何 firebase 方法之前，通过调用 firebase.initializeApp() 来初始化 firebase 应用程序，只需制作一个启动画面并将其添加为未来完成，导航到下一页。
添加脚本然后调用 dart.js，在 dart 代码中调用 firebase 应用

【解决方案3】：

我认为您缺少的是用于解决该问题的 Firestore SDK 如果您要使用 CDN，请转到此 URL

Available Firebase JS SDKs (from the CDN)

然后添加您用于案例的任何库，它是 Firestore，所以它应该是这个：

<script src="https://www.gstatic.com/firebasejs/8.0.2/firebase-firestore.js"></script>

将它添加到你的身体顶部

【讨论】：

【解决方案4】：

在最新版本的 FlutterFire 中，我发现了这些问题并且无法解决。我在降级 FlutterFire 的依赖项时解决了这个问题。由于这些是测试版，我们将面临这些问题。希望在即将发布的 Flutterfire 版本中，这些问题将得到解决。请按以下步骤操作：--

1) 在 pubsec.yaml 文件中添加这些依赖项。

  firebase_core: ^0.5.0
  firebase_auth: ^0.18.0+1
  cloud_firestore: ^0.14.3+1

2)然后将这些脚本添加到index.html文件中。

  <script src="https://www.gstatic.com/firebasejs/8.1.1/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.1.1/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.1.1/firebase-analytics.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.1.1/firebase-firestore.js"></script>

3) 之后在 main.dart.js scripts 之前添加这些脚本。

 <script>
  // Your web app's Firebase configuration
  // For Firebase JS SDK v7.20.0 and later, measurementId is optional
  var firebaseConfig = {
    apiKey: "your api key",
    authDomain: "app_name.firebaseapp.com",
    projectId: "app_name2",
    storageBucket: "app_name.appspot.com",
    messagingSenderId: "882321312y",
    appId: "1:1782944473493525:web:923488234",
    measurementId: "G-4dmfnsd"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();
  </script>

注意：- 此文件是在将 WebApp 添加到现有 Flutter 项目时生成的文件 Firebase 控制台 .

【讨论】：

【解决方案5】：

您必须从 Firebase 添加所需的所有 CDN。 不仅仅是示例中的那些。

如果你还没有这样做，你必须：

转到您的 Firebase 控制台
如果您没有项目设置 Web 应用（您创建的那个），请为您的项目创建一个新的 Web 应用
选择 CDN 并将其复制并粘贴到您的 index.html 正文中，在包含 main.dart.js 的 <script> 标记之前

如果您这样做了，但仍然无法正常工作，那是因为您需要为您正在使用的其他服务添加 CDN。

在我的例子中，它们是 firebase-auth.js 和 firebase-firestore.js。但是不要从这里的回复中复制它，因为它可能已经过时了。您可以复制包含当前版本的 firebase-app.js 的路径。我的是<script src="https://www.gstatic.com/firebasejs/8.4.2/firebase-app.js">，这意味着我当前的版本是 8.4.2，这不可能是你的情况。

【讨论】：

【解决方案6】：

在使用任何其他脚本之前先插入此脚本，因为此脚本需要先调用，然后再调用其他 firebase 脚本。

<script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-app.js"></script>

【讨论】：

【解决方案7】：

对于其他刚开始使用 Firebase 的人，您可能没有正确设置您的 Firebase 配置（例如，您正在学习有关在 Flutter 中运行 Firebase 的教程）

如果是这样，请确保您 follow steps like so 将您的 Firebase 应用配置信息添加到您的 HTML 文件中

简而言之：

在 Firebase 控制台中，选择左侧导航栏中的项目概览，然后点击通过将 Firebase 添加到您的应用来开始下的 Web 按钮。
给您的应用程序一个昵称。这是在 Firestore 控制台中用于识别应用的网络版本的值。
点击注册应用。
注册应用后，添加 Firebase SDK 步骤会为您提供一些代码，您需要将这些代码粘贴到应用的 web/index.html 文件中。这样做！

【讨论】：

【解决方案8】：

检查标签的顺序/存在，如下图：

查看最新版本：Firebase JS SDKs(from CDN)

【讨论】：

【解决方案9】：

检查您的 pubspec.yaml，并导入所有 firebase 模块。我的意思是，如果您的 pubspec.yaml 中有 firebase_auth，您还应该导入脚本 https://www.gstatic.com/firebasejs/VERSION/firebase-auth.js

【讨论】：

【解决方案10】：

仅供参考，这里是列表：https://firebase.google.com/docs/hosting/reserved-urls

每个服务都需要自己的 CDN 导入

【讨论】：

【解决方案11】：

只需将值从 8.6.2 更改为 8.10.0 即可解决我的错误。

<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>

【讨论】：