search

firebase / flutterfire

🔥 A collection of Firebase plugins for Flutter apps.
https://firebase.google.com/docs/flutter/setup
BSD 3-Clause "New" or "Revised" License
8.57k stars 3.94k forks source link

🐛 [firebase_core] TypeError: Cannot read property 'app' of undefined #6958

Closed yulkin2002 closed 2 years ago

yulkin2002 commented 2 years ago

Bug report

Describe the bug I am trying to run a flutter app on the web (Chrome browser on my computer) and get the following error. (I've reviewed other closed issues with similar error and followed the Firebase web installation guide, but error still there)

Waiting for connection from debug service on Chrome...
This app is linked to the debug service: ws://127.0.0.1:51611/tFk7ytnI-bY=/ws
Debug service listening on ws://127.0.0.1:51611/tFk7ytnI-bY=/ws

Running with unsound null safety
For more information see https://dart.dev/null-safety/unsound-null-safety
Debug service listening on ws://127.0.0.1:51611/tFk7ytnI-bY=/ws
TypeError: Cannot read property 'app' of undefined
    at Object.app$ [as app] (http://localhost:62379/packages/firebase_core_web/src/interop/core.dart.lib.js:31:101)
    at new cloud_firestore_web.FirebaseFirestoreWeb.new (http://localhost:62379/packages/cloud_firestore_web/src/write_batch_web.dart.lib.js:920:64)
    at Function.registerWith (http://localhost:62379/packages/cloud_firestore_web/src/write_batch_web.dart.lib.js:820:73)
    at Object.registerPlugins (http://localhost:62379/packages/nearby/generated_plugin_registrant.dart.lib.js:20:46)
    at main (http://localhost:62379/web_entrypoint.dart.lib.js:34:35)
    at main.next (<anonymous>)
    at runBody (http://localhost:62379/dart_sdk.js:39250:34)
    at Object._async [as async] (http://localhost:62379/dart_sdk.js:39281:7)
    at main$ (http://localhost:62379/web_entrypoint.dart.lib.js:33:18)
    at http://localhost:62379/main_module.bootstrap.js:19:10
    at Array.forEach (<anonymous>)
    at window.$dartRunMain (http://localhost:62379/main_module.bootstrap.js:18:32)
    at <anonymous>:1:8
    at Object.runMain (http://localhost:62379/dwds/src/injected/client.js:8825:21)
    at http://localhost:62379/dwds/src/injected/client.js:22713:19
    at _wrapJsFunctionForAsync_closure.$protected (http://localhost:62379/dwds/src/injected/client.js:3851:15)
    at _wrapJsFunctionForAsync_closure.call$2 (http://localhost:62379/dwds/src/injected/client.js:11063:12)
    at Object._asyncStartSync (http://localhost:62379/dwds/src/injected/client.js:3815:20)
    at main__closure1.$call$body$main__closure (http://localhost:62379/dwds/src/injected/client.js:22725:16)
    at main__closure1.call$1 (http://localhost:62379/dwds/src/injected/client.js:22652:19)
    at StaticClosure._rootRunUnary [as call$2$5] (http://localhost:62379/dwds/src/injected/client.js:4185:16)
    at _CustomZone.runUnary$2$2 (http://localhost:62379/dwds/src/injected/client.js:12436:39)
    at _CustomZone.runUnaryGuarded$1$2 (http://localhost:62379/dwds/src/injected/client.js:12383:14)
    at _ControllerSubscription._sendData$1 (http://localhost:62379/dwds/src/injected/client.js:11959:19)
    at _DelayedData.perform$1 (http://localhost:62379/dwds/src/injected/client.js:12148:59)
    at _PendingEvents_schedule_closure.call$0 (http://localhost:62379/dwds/src/injected/client.js:12197:14)
    at Object._microtaskLoop (http://localhost:62379/dwds/src/injected/client.js:4023:24)
    at StaticClosure._startMicrotaskLoop (http://localhost:62379/dwds/src/injected/client.js:4029:11)
    at _AsyncRun__initializeScheduleImmediate_internalCallback.call$1 (http://localhost:62379/dwds/src/injected/client.js:10932:9)
    at invokeClosure (http://localhost:62379/dwds/src/injected/client.js:1259:26)
    at MutationObserver.<anonymous> (http://localhost:62379/dwds/src/injected/client.js:1278:18)

Steps to reproduce

Steps to reproduce the behavior:

  1. In Android Studio select Chrome(web) under Flutter device selection and click run
  2. See error or incorrect behavior

Expected behavior

Expecting my app to run in the Chrome Browser

Sample project

Below is my Index.html


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="description" content="A new Flutter application.">

  <!-- iOS meta tags & icons -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="nearby">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">

  <!-- Favicon -->
  <link rel="shortcut icon" type="image/png" href="favicon.png"/>

  <title>nearby</title>
  <link rel="manifest" href="manifest.json">
</head>
<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('load', function () {
        navigator.serviceWorker.register('flutter_service_worker.js');
      });
    }
  </script>

  <script type="module">

  // Import the functions you need from the SDKs you need

  import { initializeApp } from "https://www.gstatic.com/firebasejs/9.0.1/firebase-app.js";

  import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.0.1/firebase-analytics.js";

  // TODO: Add SDKs for Firebase products that you want to use

  // https://firebase.google.com/docs/web/setup#available-libraries

  // Your web app's Firebase configuration

  // For Firebase JS SDK v7.20.0 and later, measurementId is optional

  const firebaseConfig = {

    apiKey: [My API Key],

    authDomain: [My Auth Domain],

    databaseURL: [My DB URL],

    projectId: [my project ID],

    storageBucket: "[MY_PROJECT].appspot.com",

    messagingSenderId: "...",

    appId: "1:....",

    measurementId: "..."

  };

  // Initialize Firebase

  const app = initializeApp(firebaseConfig);

  const analytics = getAnalytics(app);

</script>
<script src="main.dart.js" type="application/javascript"></script>
</body>
</html>

Additional context

App runs on Android with no issues

Flutter doctor

Run flutter doctor and paste the output below:

Click To Expand ``` Doctor summary (to see all details, run flutter doctor -v): [√] Flutter (Channel stable, 2.2.3, on Microsoft Windows [Version 6.1.7601], locale en-CA) [√] Android toolchain - develop for Android devices (Android SDK version 30.0.2) [√] Chrome - develop for the web [√] Android Studio (version 4.1.0) [√] VS Code [√] Connected device (1 available) • No issues found! ```

Flutter dependencies

Run flutter pub deps -- --style=compact and paste the output below:

Click To Expand ``` Dart SDK 2.13.4 Flutter SDK 2.2.3 nearby 1.0.0+2 dependencies: - cloud_firestore 2.5.1 [cloud_firestore_platform_interface cloud_firestore_web collection firebase_core f irebase_core_platform_interface flutter meta] - cupertino_icons 1.0.3 - firebase_analytics 8.3.1 [firebase_analytics_platform_interface firebase_analytics_web firebase_core flu tter meta] - firebase_auth 3.1.0 [firebase_auth_platform_interface firebase_auth_web firebase_core firebase_core_plat form_interface flutter meta] - firebase_core 1.6.0 [firebase_core_platform_interface firebase_core_web flutter meta] - firebase_crashlytics 2.2.1 [firebase_core firebase_core_platform_interface firebase_crashlytics_platform _interface flutter stack_trace] - firebase_storage 10.0.3 [firebase_core firebase_core_platform_interface firebase_storage_platform_interf ace firebase_storage_web flutter] - flutter 0.0.0 [characters collection meta typed_data vector_math sky_engine] - font_awesome_flutter 9.1.0 [flutter] - geocoding 2.0.0 [flutter geocoding_platform_interface] - get 4.3.8 [flutter] - google_sign_in 5.0.7 [flutter google_sign_in_platform_interface google_sign_in_web meta] - http 0.13.3 [async http_parser meta path pedantic] - image_picker 0.8.3+3 [flutter flutter_plugin_android_lifecycle image_picker_for_web image_picker_platfor m_interface] - mockito 5.0.15 [analyzer build code_builder collection dart_style matcher meta path source_gen test_api] - modal_progress_hud 0.1.3 [flutter] - path_provider 2.0.2 [flutter path_provider_platform_interface path_provider_macos path_provider_linux pa th_provider_windows] - proximity_hash 2.0.0 - url_launcher 6.0.9 [flutter meta url_launcher_linux url_launcher_macos url_launcher_platform_interface u rl_launcher_web url_launcher_windows] dev dependencies: - flutter_test 0.0.0 [flutter test_api path fake_async clock stack_trace vector_math async boolean_selecto r characters charcode collection matcher meta source_span stream_channel string_scanner term_glyph typed_d ata] transitive dependencies: - _fe_analyzer_shared 22.0.0 [meta] - analyzer 1.7.1 [_fe_analyzer_shared cli_util collection convert crypto glob meta package_config path pub _semver source_span watcher yaml pedantic] - args 2.2.0 - async 2.6.1 [meta collection] - boolean_selector 2.1.0 [source_span string_scanner] - build 2.1.0 [analyzer async convert crypto glob logging meta path] - built_collection 5.1.0 - built_value 8.1.2 [built_collection collection fixnum meta] - characters 1.1.0 - charcode 1.2.0 - cli_util 0.3.3 [meta path] - clock 1.1.0 - cloud_firestore_platform_interface 5.4.1 [collection firebase_core flutter meta plugin_platform_interfac e] - cloud_firestore_web 2.4.1 [cloud_firestore_platform_interface collection firebase_core firebase_core_web flutter flutter_web_plugins js] - code_builder 4.1.0 [built_collection built_value collection matcher meta] - collection 1.15.0 - convert 3.0.1 [typed_data] - cross_file 0.3.1+4 [flutter meta] - crypto 3.0.1 [collection typed_data] - dart_style 2.0.3 [analyzer args path pub_semver source_span] - fake_async 1.2.0 [clock collection] - ffi 1.1.2 - file 6.1.2 [meta path] - firebase 9.0.1 [http http_parser js] - firebase_analytics_platform_interface 2.0.1 [flutter meta] - firebase_analytics_web 0.3.0+1 [firebase firebase_analytics_platform_interface flutter flutter_web_plugi ns meta] - firebase_auth_platform_interface 6.1.0 [firebase_core flutter meta plugin_platform_interface] - firebase_auth_web 3.1.0 [firebase_auth_platform_interface firebase_core firebase_core_web flutter flutte r_web_plugins http_parser intl js meta] - firebase_core_platform_interface 4.0.1 [collection flutter meta plugin_platform_interface] - firebase_core_web 1.1.0 [firebase_core_platform_interface flutter flutter_web_plugins js meta] - firebase_crashlytics_platform_interface 3.1.2 [collection firebase_core flutter meta plugin_platform_int erface] - firebase_storage_platform_interface 4.0.2 [collection firebase_core flutter meta plugin_platform_interfa ce] - firebase_storage_web 3.0.2 [async firebase_core firebase_core_web firebase_storage_platform_interface fl utter flutter_web_plugins http js meta] - fixnum 1.0.0 - flutter_plugin_android_lifecycle 2.0.2 [flutter] - flutter_web_plugins 0.0.0 [flutter js characters collection meta typed_data vector_math] - geocoding_platform_interface 2.0.0 [flutter meta plugin_platform_interface] - glob 2.0.1 [async collection file path pedantic string_scanner] - google_sign_in_platform_interface 2.0.1 [flutter meta quiver] - google_sign_in_web 0.10.0+2 [flutter flutter_web_plugins google_sign_in_platform_interface js meta] - http_parser 4.0.0 [charcode collection source_span string_scanner typed_data] - image_picker_for_web 2.1.3 [flutter flutter_web_plugins image_picker_platform_interface meta] - image_picker_platform_interface 2.3.0 [flutter http meta plugin_platform_interface cross_file] - intl 0.17.0 [clock path] - js 0.6.3 - logging 1.0.1 - matcher 0.12.10 [stack_trace] - meta 1.3.0 - package_config 2.0.0 [path] - path 1.8.0 - path_provider_linux 2.0.2 [flutter path path_provider_platform_interface xdg_directories] - path_provider_macos 2.0.2 [flutter] - path_provider_platform_interface 2.0.1 [flutter meta platform plugin_platform_interface] - path_provider_windows 2.0.3 [ffi flutter meta path path_provider_platform_interface win32] - pedantic 1.11.1 - platform 3.0.2 - plugin_platform_interface 2.0.1 [meta] - process 4.2.3 [file path platform] - pub_semver 2.0.0 [collection] - quiver 3.0.1 [matcher] - sky_engine 0.0.99 - source_gen 1.0.3 [analyzer async build dart_style glob meta path pedantic source_span yaml] - source_span 1.8.1 [collection path term_glyph] - stack_trace 1.10.0 [path] - stream_channel 2.1.0 [async] - string_scanner 1.1.0 [charcode source_span] - term_glyph 1.2.0 - test_api 0.3.0 [async boolean_selector collection meta path source_span stack_trace stream_channel strin g_scanner term_glyph matcher] - typed_data 1.3.0 [collection] - url_launcher_linux 2.0.1 [flutter] - url_launcher_macos 2.0.1 [flutter] - url_launcher_platform_interface 2.0.4 [flutter plugin_platform_interface] - url_launcher_web 2.0.4 [flutter flutter_web_plugins meta url_launcher_platform_interface] - url_launcher_windows 2.0.2 [flutter] - vector_math 2.1.0 - watcher 1.0.0 [async path pedantic] - win32 2.2.7 [ffi] - xdg_directories 0.2.0 [meta path process] - yaml 3.1.0 [collection source_span string_scanner] ```
markusaksli-nc commented 2 years ago

Hi @yulkin2002 You do not need to import just the functions in the initialization script, you need to import the whole CDN to have any functionality.

<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-analytics.js"></script>

https://firebase.flutter.dev/docs/installation/web#add-firebase-sdks https://firebase.flutter.dev/docs/analytics/overview#3-web-only-add-the-sdk We also recommend you use the version in the documentation since we test against this fixed version. We do not guarantee stability if you use any other versions. Thank you

yulkin2002 commented 2 years ago

@markusaksli-nc I updated my index.html per the docs and your comment above, but getting a different error now:


TypeError: dart.global.firebase.firestore is not a function
    at Object.getFirestoreInstance (http://localhost:55214/packages/cloud_firestore_web/src/interop/utils/utils.dart.lib.js:1242:79)
    at new cloud_firestore_web.FirebaseFirestoreWeb.new (http://localhost:55214/packages/cloud_firestore_web/src/write_batch_web.dart.lib.js:920:37)
    at Function.registerWith (http://localhost:55214/packages/cloud_firestore_web/src/write_batch_web.dart.lib.js:820:73)
    at Object.registerPlugins (http://localhost:55214/packages/nearby/generated_plugin_registrant.dart.lib.js:20:46)
    at main (http://localhost:55214/web_entrypoint.dart.lib.js:34:35)
    at main.next (<anonymous>)
    at runBody (http://localhost:55214/dart_sdk.js:39250:34)
    at Object._async [as async] (http://localhost:55214/dart_sdk.js:39281:7)
    at main$ (http://localhost:55214/web_entrypoint.dart.lib.js:33:18)
    at http://localhost:55214/main_module.bootstrap.js:19:10
    at Array.forEach (<anonymous>)
    at window.$dartRunMain (http://localhost:55214/main_module.bootstrap.js:18:32)
    at <anonymous>:1:8
    at Object.runMain (http://localhost:55214/dwds/src/injected/client.js:8825:21)
    at http://localhost:55214/dwds/src/injected/client.js:22713:19
    at _wrapJsFunctionForAsync_closure.$protected (http://localhost:55214/dwds/src/injected/client.js:3851:15)
    at _wrapJsFunctionForAsync_closure.call$2 (http://localhost:55214/dwds/src/injected/client.js:11063:12)
    at Object._asyncStartSync (http://localhost:55214/dwds/src/injected/client.js:3815:20)
    at main__closure1.$call$body$main__closure (http://localhost:55214/dwds/src/injected/client.js:22725:16)
    at main__closure1.call$1 (http://localhost:55214/dwds/src/injected/client.js:22652:19)
    at StaticClosure._rootRunUnary [as call$2$5] (http://localhost:55214/dwds/src/injected/client.js:4185:16)
    at _CustomZone.runUnary$2$2 (http://localhost:55214/dwds/src/injected/client.js:12436:39)
    at _CustomZone.runUnaryGuarded$1$2 (http://localhost:55214/dwds/src/injected/client.js:12383:14)
    at _ControllerSubscription._sendData$1 (http://localhost:55214/dwds/src/injected/client.js:11959:19)
    at _DelayedData.perform$1 (http://localhost:55214/dwds/src/injected/client.js:12148:59)
    at _PendingEvents_schedule_closure.call$0 (http://localhost:55214/dwds/src/injected/client.js:12197:14)
    at Object._microtaskLoop (http://localhost:55214/dwds/src/injected/client.js:4023:24)
    at StaticClosure._startMicrotaskLoop (http://localhost:55214/dwds/src/injected/client.js:4029:11)
    at _AsyncRun__initializeScheduleImmediate_internalCallback.call$1 (http://localhost:55214/dwds/src/injected/client.js:10932:9)
    at invokeClosure (http://localhost:55214/dwds/src/injected/client.js:1259:26)
    at MutationObserver.<anonymous> (http://localhost:55214/dwds/src/injected/client.js:1278:18)

here is the updated code, I followed the docs to the letter, why the error?


<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('load', function () {
        navigator.serviceWorker.register('flutter_service_worker.js');
      });
    }
  </script>

  <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-analytics.js"></script>

  <script>

   var firebaseConfig = {

    apiKey: [My API Key],

    authDomain: [My Auth Domain],

    databaseURL: [My DB URL],

    projectId: [my project ID],

    storageBucket: "[MY_PROJECT].appspot.com",

    messagingSenderId: "...",

    appId: "1:....",

    measurementId: "..."

  };

  // Initialize Firebase

  firebase.initializeApp(firebaseConfig);

</script>
<script src="main.dart.js" type="application/javascript"></script>
</body>

NOTE: if I keep my index.html as is and only add the two lines you suggested I get yet different error:


FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).
    at Object.u [as app] (https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js:1:18836)
    at Object.app$ [as app] (http://localhost:56785/packages/firebase_core_web/src/interop/core.dart.lib.js:31:101)
    at new cloud_firestore_web.FirebaseFirestoreWeb.new (http://localhost:56785/packages/cloud_firestore_web/src/write_batch_web.dart.lib.js:920:64)
    at Function.registerWith (http://localhost:56785/packages/cloud_firestore_web/src/write_batch_web.dart.lib.js:820:73)
    at Object.registerPlugins (http://localhost:56785/packages/nearby/generated_plugin_registrant.dart.lib.js:20:46)
    at main (http://localhost:56785/web_entrypoint.dart.lib.js:34:35)
    at main.next (<anonymous>)
    at runBody (http://localhost:56785/dart_sdk.js:39250:34)
    at Object._async [as async] (http://localhost:56785/dart_sdk.js:39281:7)
    at main$ (http://localhost:56785/web_entrypoint.dart.lib.js:33:18)
    at http://localhost:56785/main_module.bootstrap.js:19:10
    at Array.forEach (<anonymous>)
    at window.$dartRunMain (http://localhost:56785/main_module.bootstrap.js:18:32)
    at <anonymous>:1:8
    at Object.runMain (http://localhost:56785/dwds/src/injected/client.js:8825:21)
    at http://localhost:56785/dwds/src/injected/client.js:22713:19
    at _wrapJsFunctionForAsync_closure.$protected (http://localhost:56785/dwds/src/injected/client.js:3851:15)
    at _wrapJsFunctionForAsync_closure.call$2 (http://localhost:56785/dwds/src/injected/client.js:11063:12)
    at Object._asyncStartSync (http://localhost:56785/dwds/src/injected/client.js:3815:20)
    at main__closure1.$call$body$main__closure (http://localhost:56785/dwds/src/injected/client.js:22725:16)
    at main__closure1.call$1 (http://localhost:56785/dwds/src/injected/client.js:22652:19)
    at StaticClosure._rootRunUnary [as call$2$5] (http://localhost:56785/dwds/src/injected/client.js:4185:16)
    at _CustomZone.runUnary$2$2 (http://localhost:56785/dwds/src/injected/client.js:12436:39)
    at _CustomZone.runUnaryGuarded$1$2 (http://localhost:56785/dwds/src/injected/client.js:12383:14)
    at _ControllerSubscription._sendData$1 (http://localhost:56785/dwds/src/injected/client.js:11959:19)
    at _DelayedData.perform$1 (http://localhost:56785/dwds/src/injected/client.js:12148:59)
    at _PendingEvents_schedule_closure.call$0 (http://localhost:56785/dwds/src/injected/client.js:12197:14)
    at Object._microtaskLoop (http://localhost:56785/dwds/src/injected/client.js:4023:24)
    at StaticClosure._startMicrotaskLoop (http://localhost:56785/dwds/src/injected/client.js:4029:11)
    at _AsyncRun__initializeScheduleImmediate_internalCallback.call$1 (http://localhost:56785/dwds/src/injected/client.js:10932:9)
    at invokeClosure (http://localhost:56785/dwds/src/injected/client.js:1259:26)
    at MutationObserver.<anonymous> (http://localhost:56785/dwds/src/injected/client.js:1278:18)
markusaksli-nc commented 2 years ago

You are getting the mentioned firestore error because you need to add the CDN import for each FlutterFire plugin https://firebase.flutter.dev/docs/firestore/overview#3-web-only-add-the-sdk

In general you should just open up the relevant docs page for whichever plugin you are installing to make sure you complete the required steps.

yulkin2002 commented 2 years ago

@markusaksli-nc , thank you, it helped. Is there any documentation on the proper syntax and versions for adding all other FlutterFire plugins (i.e. firebase storage, cloud firestore, etc)?

markusaksli-nc commented 2 years ago

Like I mentioned the documentation pages for each of the plugins on the sidebar of the docs site should help you. They all follow a similar syntax and should have the same CDN version.