TypeError: Cannot read property 'app' of undefined Error - Flutter using firebase Auth and Firestore in flutter web app

Question

 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 (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 (http://localhost:49841/dwds/src/injected/client.js:22007:19)
    at StaticClosure._rootRunUnary [as call] (http://localhost:49841/dwds/src/injected/client.js:4153:16)
    at _CustomZone.runUnary (http://localhost:49841/dwds/src/injected/client.js:12136:39)
    at _CustomZone.runUnaryGuarded (http://localhost:49841/dwds/src/injected/client.js:12068:14)
    at _ControllerSubscription._sendData (http://localhost:49841/dwds/src/injected/client.js:11697:19)
    at _DelayedData.perform (http://localhost:49841/dwds/src/injected/client.js:11849:59)
    at _PendingEvents_schedule_closure.call[=10=] (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 (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>
`

Answer 1

2021 年 9 月更新：

我会尽量把它分解，但还有很多事情要做。

根据文档，在使用 Flutter Web 和 Firebase 时，您需要在 index.html 中添加 Firebase 依赖项，如下所示：

使用您想要的依赖项，但如果您不使用分析，请将其排除在外。你必须首先导入这个 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 并请反馈。

这还包括在您的 pubspec.yaml 文件中添加依赖项。

Answer 2

Cannot read property 'app' of undefined  at ServerResponse.render...

回调函数参数中的拼写错误会导致与上述类似的错误（例如 function(request, reponse)）

TypeError: Cannot read property 'app' of undefined Error - Flutter using firebase Auth and Firestore in flutter web app

TypeError: Cannot read property 'app' of undefined Error - Flutter using firebase Auth and Firestore in flutter web app

firebase

firebase-authentication

flutter

google-cloud-firestore

flutter-web