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$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>
`

Please post also your dependencies, relevant code, and index.html file since you're running web. — Huthaifa Muayyad, Commented Mar 28, 2021 at 16:45
where do you get all these settings from in the Firebase Console? — mLstudent33, Commented Aug 26, 2021 at 17:15

Huthaifa Muayyad · Accepted Answer · 2021-09-11 11:52:21Z

Update September 2021:

I'll try to break it up as much as possible, but there are plenty of things to be done.

As per the documentation, when working with Flutter Web and Firebase, you need to add your Firebase dependencies in your index.html, like this:

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>

If you are going to attempt to Authenticate using Google, you will also have to add your google-Oath token in this file.

Try to build it now and check this out and report back please.

This is also including adding the dependancies in your pubspec.yaml file.

You're most welcome, if you don't mind voting it and accepting it as an answer, I'd appreciate it. — Huthaifa Muayyad, Commented Mar 28, 2021 at 19:27
For anyone running into issues here, you need to make sure to use the 8.6.1 version, not the latest 9.0.2 version ! — Keithsoulasa, Commented Sep 16, 2021 at 23:15

IceMan · Accepted Answer · 2021-06-07 12:44:20Z

0

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

A spelling error in the callback function parameters can cause a similar error as above (eg function(request, reponse))

answered Jun 7, 2021 at 12:44

IceMan

711 silver badge4 bronze badges

Add a comment |

Collectives™ on Stack Overflow

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

2 Answers 2

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Linked

Related