“未捕获的 ReferenceError:未定义 firebase”。如何在 Chrome 中定义 firebase 并超越黑屏?
Posted
技术标签:
【中文标题】“未捕获的 ReferenceError:未定义 firebase”。如何在 Chrome 中定义 firebase 并超越黑屏?【英文标题】:"Uncaught ReferenceError: firebase is not defined". How to define firebase and get beyond blank screen in Chrome? 【发布时间】:2021-01-03 16:26:50 【问题描述】:我正在将 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() 中初始化。所有这些都会导致相同的错误。
问题显然是 firebase 没有定义。我的问题是如何定义 firebase?
【问题讨论】:
【参考方案1】:在index.html
中添加JS SDK时没有指定完整的版本号
7.20.- 不是真正的版本,它只是一个占位符,供您指定要使用的版本。
您可以在浏览器中转至src
进行检查。您将看到您当前拥有的src
s 将不存在。我下面展示的会展示一堆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>
【讨论】:
使用 JS SDK 7.20.0 时,我得到了相同的行为(Chrome 中的空白屏幕),但在 VS CODE 控制台或 Chrome 控制台中没有抛出错误。 VS CODE 控制台停在:“在调试模式下在 Chrome 上启动 lib/main.dart...在 ws://127.0.0.1:56244/SvcDhmFjnsY 上侦听的调试服务 = 在 ws://127.0.0.1 连接到 VM 服务:56244/SvcDhmFjnsY=" 这都是你刚才描述的正常行为。 这是一款功能强大的应用程序,适用于 Web、iOS 和 Android。如果是正常行为,为什么是黑屏,控制台没有输出? 您发布的内容包含构建 Web 时通常会看到的日志。白屏最初是针对 Web 显示的,但它应该然后更改为您的实际应用程序。您的计算机可能只是有点慢,或者存在您没有看到的实际错误。您可能想尝试较低版本的 JS 库,但这只是在黑暗中尝试。 您的评论让我走上了另一条道路,最终解决了这个问题。谢谢你的灵感。这个问题与 firebase 无关,并且在我的 Hive 数据库的 init 中。以上是关于“未捕获的 ReferenceError:未定义 firebase”。如何在 Chrome 中定义 firebase 并超越黑屏?的主要内容,如果未能解决你的问题,请参考以下文章
未捕获的 ReferenceError:“$ 未定义”[重复]