"Uncaught ReferenceError: firebase is not defined" .如何在Chrome中定义Firebase并超越空白屏幕？

Question

我正在将Flutter web集成到现有的应用程序中。现有应用程序在iOS和Android上的功能与预期一致。该应用程序使用FlutterFire。有了以下内容，当运行到Chrome设备时，我会得到一个空白的白色屏幕。

pubspec.yaml

environment: 

sdk: '>=2.6.0 <3.0.0'
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^0.1.2

firebase: ^7.3.0
firebase_core: ^0.5.0
cloud_firestore: ^0.14.0+2
firebase_analytics: ^6.0.0
firebase_auth: ^0.18.0+1

index.html

<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.20.-/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.20.-/firebase-analytics.js"></script>

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

<script src="https://www.gstatic.com/firebasejs/7.20.-/firebase-auth.js"></script>
<script>
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
var firebaseConfig = {
apiKey: "myKeyHere",
authDomain: "myDomainHere",
databaseURL: "myURLHere",
projectId: "myProjIDHere",
storageBucket: "myBucketHere",
messagingSenderId: "myMessageID",
appId: "myAppID",
measurementId: "myMeasID"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
<!-- This script installs service_worker.js to provide PWA functionality to
application. For more information, see:
https://developers.google.com/web/fundamentals/primers/service-workers -->
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
navigator.serviceWorker.register('flutter_service_worker.js');
});
}
</script>

<script defer src="main.dart.js" type="application/javascript"></script>
</body>

这导致VSCode控制台中出现以下错误：

TypeError: Cannot read property 'app' of undefined
at Object.app$ [as app] (http://localhost:58913/packages/firebase/src/top_level.dart.lib.js:78:89)
at new cloud_firestore_web.FirebaseFirestoreWeb.new (http://localhost:58913/packages/cloud_firestore_web/src/write_batch_web.dart.lib.js:755:57)
at Function.registerWith (http://localhost:58913/packages/cloud_firestore_web/src/write_batch_web.dart.lib.js:671:73)
at Object.registerPlugins ...

以及Chrome控制台中的以下错误：

Uncaught ReferenceError: firebase is not defined
at localhost/:50
:58913/packages/firebase/src/top_level.dart.lib.js:78 Uncaught (in promise) TypeError: Cannot read property 'app' of undefined
at Object.app$ [as app] (:58913/packages/firebase/src/top_level.dart.lib.js:78)
at new cloud_firestore_web.FirebaseFirestoreWeb.new (:58913/packages/cloud_firestore_web/src/write_batch_web.dart.lib.js:755)
at Function.registerWith (:58913/packages/cloud_firestore_web/src/write_batch_web.dart.lib.js:671)
at Object.registerPlugins (:58913/packages/carlinehound/generated_plugin_registrant.dart.lib.js:23)
at main (:58913/web_entrypoint.dart.lib.js:29)
at main.next (<anonymous>)

我使用了Future Builder和Streambuilder FlutterFire应用程序的初始化方法。我还在main((中简单地进行了初始化。所有这些都会导致相同的错误。

问题显然是没有定义防火带。我的问题是我该如何定义火球？

Answer 1

在index.html中添加JS SDK时，您没有指定完整的版本号

7.20.-不是一个真实的版本，它只是一个占位符，供您指定要使用的版本。

您可以通过访问浏览器中的src进行检查。您将看到您当前拥有的src将不存在。我在下面展示的将展示一堆JS。

如果要使用最新版本，则应为7.20.0。

<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-analytics.js"></script>

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

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