本文介绍了TypeError:无法读取未定义错误的属性“app" - Flutter 在 Flutter Web 应用程序中使用 firebase Auth 和 Firestore的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
Running with sound null safety
TypeError: Cannot read property 'app' of undefined
at Object.app$ [as app] (http://localhost:49841/packages/firebase_core_web/src/interop/core.dart.lib.js:42:101)
at new cloud_firestore_web.FirebaseFirestoreWeb.new (http://localhost:49841/packages/cloud_firestore_web/src/write_batch_web.dart.lib.js:988:64)
at Function.registerWith (http://localhost:49841/packages/cloud_firestore_web/src/write_batch_web.dart.lib.js:842:73)
at Object.registerPlugins (http://localhost:49841/packages/nse7a/generated_plugin_registrant.dart.lib.js:33:46)
at main (http://localhost:49841/web_entrypoint.dart.lib.js:41:35)
at main.next (<anonymous>)
at runBody (http://localhost:49841/dart_sdk.js:37229:34)
at Object._async [as async] (http://localhost:49841/dart_sdk.js:37260:7)
at main$ (http://localhost:49841/web_entrypoint.dart.lib.js:40:18)
at http://localhost:49841/main_module.bootstrap.js:19:10
at Array.forEach (<anonymous>)
at window.$dartRunMain (http://localhost:49841/main_module.bootstrap.js:18:32)
at <anonymous>:1:8
at Object.runMain (http://localhost:49841/dwds/src/injected/client.js:8656:21)
at http://localhost:49841/dwds/src/injected/client.js:22068:19
at _wrapJsFunctionForAsync_closure.$protected (http://localhost:49841/dwds/src/injected/client.js:3830:15)
at _wrapJsFunctionForAsync_closure.call$2 (http://localhost:49841/dwds/src/injected/client.js:10905:12)
at Object._asyncStartSync (http://localhost:49841/dwds/src/injected/client.js:3794:20)
at main__closure1.$call$body$main__closure (http://localhost:49841/dwds/src/injected/client.js:22080:16)
at main__closure1.call$1 (http://localhost:49841/dwds/src/injected/client.js:22007:19)
at StaticClosure._rootRunUnary [as call$2$5] (http://localhost:49841/dwds/src/injected/client.js:4153:16)
at _CustomZone.runUnary$2$2 (http://localhost:49841/dwds/src/injected/client.js:12136:39)
at _CustomZone.runUnaryGuarded$1$2 (http://localhost:49841/dwds/src/injected/client.js:12068:14)
at _ControllerSubscription._sendData$1 (http://localhost:49841/dwds/src/injected/client.js:11697:19)
at _DelayedData.perform$1 (http://localhost:49841/dwds/src/injected/client.js:11849:59)
at _PendingEvents_schedule_closure.call$0 (http://localhost:49841/dwds/src/injected/client.js:11898:14)
at Object._microtaskLoop (http://localhost:49841/dwds/src/injected/client.js:3990:24)
at StaticClosure._startMicrotaskLoop (http://localhost:49841/dwds/src/injected/client.js:3996:11)
at _AsyncRun__initializeScheduleImmediate_internalCallback.call$1 (http://localhost:49841/dwds/src/injected/client.js:10774:9)
at invokeClosure (http://localhost:49841/dwds/src/injected/client.js:1250:26)
at MutationObserver.<anonymous> (http://localhost:49841/dwds/src/injected/client.js:1269:18)
ERROR - 2021-03-28 17:45:59.793377
GET /web_entrypoint.dart.lib.js:40:18
Error thrown by handler.
FormatException: Illegal scheme character (at character 4)
web_entrypoint.dart.lib.js:40:18
^
dart:core _Uri.resolve
package:flutter_tools/src/isolated/devfs_web.dart 503:57 WebAssetServer._resolveDartFile
package:flutter_tools/src/isolated/devfs_web.dart 395:17 WebAssetServer.handleRequest
package:dwds/src/handlers/injector.dart 110:32 DwdsInjector.middleware.<fn>.<fn>
dependencies
dependencies:
flutter:
SDK: flutter
firebase_auth_web:
# The following adds the Cupertino Icons font to your application.
# Use the CupertinoIcons class for iOS style icons.
cupertino_icons:
firebase_auth:
animated_splash_screen:
provider:
firebase_storage:
cloud_firestore:
firebase_core:
json_annotation:
curved_navigation_bar:
shared_preferences:
# device_preview: ^0.5.5
flutter_screenutil:
url_launcher:
flushbar:
flutter_launcher_icons:
image_picker:
index.html
`<body>
<!-- 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('flutter-first-frame', function () {
navigator.serviceWorker.register('flutter_service_worker.js');
});
}
</script>
<script>
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
var firebaseConfig = {
apiKey: "********",
authDomain: "*******",
databaseURL: "https*******.com",
projectId: "******",
storageBucket: "nse7a-68809.appspot.com",
messagingSenderId: "******",
appId: "1:******",
measurementId: "G-F5XJN2HE8D"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
<script src="main.dart.js" type="application/javascript"></script>
</body>
</html>
`
推荐答案
2021 年 9 月更新:
Update September 2021:
我会尽量分解，但还有很多事情要做.
I'll try to break it up as much as possible, but there are plenty of things to be done.
- 根据文档，使用 Flutter Web 和 Firebase 时，您需要在 index.html 中添加 Firebase 依赖项，如下所示:
使用您想要的依赖项，但如果您不使用分析，请忽略它.你必须先导入 firebasejs/8.6.1/firebase-app.js
Use the dependencies that you want, but if you aren't using analytics, leave it out. You have to import this first thing though firebasejs/8.6.1/firebase-app.js
<head>
//This is important for google auth on web. You can get it from Firebase=>Auth=>sign in methods=>Google.
<meta name="google-signin-client_id"
content="***********-*************.apps.googleusercontent.com">
</head>
<body>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-storage.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-messaging.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-analytics.js"></script>
<script>
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
var firebaseConfig = {
apiKey: "***",
authDomain: "***",
projectId: "***",
storageBucket: "***",
messagingSenderId: "***",
appId: "***",
measurementId: "***"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
- 如果您要尝试使用 Google 进行身份验证，您还必须在此文件中添加您的 google-Oath 令牌.
现在尝试构建它并检查this并请回来报告.
Try to build it now and check this out and report back please.
这还包括在您的 pubspec.yaml 文件中添加依赖项.
This is also including adding the dependancies in your pubspec.yaml file.
这篇关于TypeError:无法读取未定义错误的属性“app" - Flutter 在 Flutter Web 应用程序中使用 firebase Auth 和 Firestore的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！