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

Issue

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

Solution

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.

Answered By – Huthaifa Muayyad

Answer Checked By – Cary Denson (FlutterFixes Admin)

Leave a Reply

Your email address will not be published. Required fields are marked *