Блог

Я интегрирую Flutter web в существующее приложение. Существующее приложение функционирует должным образом на iOS и Android. Приложение использует FlutterFire. С приведенным ниже, при запуске на устройстве Chrome я получаю пустой белый экран.

pubspec.yaml

 environment: 


sdk: '>=2.6.0 <3.0.0'

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.2
  
  firebase: ^7.3.0
  firebase_core: ^0.5.0
  cloud_firestore: ^0.14.0 2
  firebase_analytics: ^6.0.0
  firebase_auth: ^0.18.0 1
  

index.html

 <!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.20.-/firebase-app.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.20.-/firebase-analytics.js"></script>


<script src="https://www.gstatic.com/firebasejs/7.20.-/firebase-firestore.js"></script>


<script src="https://www.gstatic.com/firebasejs/7.20.-/firebase-auth.js"></script>

<script>
  // Your web app's Firebase configuration
  // For Firebase JS SDK v7.20.0 and later, measurementId is optional
  var firebaseConfig = {
    apiKey: "myKeyHere",
    authDomain: "myDomainHere",
    databaseURL: "myURLHere",
    projectId: "myProjIDHere",
    storageBucket: "myBucketHere",
    messagingSenderId: "myMessageID",
    appId: "myAppID",
    measurementId: "myMeasID"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();
</script>

<!-- 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 defer src="main.dart.js" type="application/javascript"></script>

</body>
  

Это приводит к следующей ошибке в консоли VSCode:

 TypeError: Cannot read property 'app' of undefined
    at Object.app$ [as app] (http://localhost:58913/packages/firebase/src/top_level.dart.lib.js:78:89)
    at new cloud_firestore_web.FirebaseFirestoreWeb.new (http://localhost:58913/packages/cloud_firestore_web/src/write_batch_web.dart.lib.js:755:57)
    at Function.registerWith (http://localhost:58913/packages/cloud_firestore_web/src/write_batch_web.dart.lib.js:671:73)
    at Object.registerPlugins ...
  

и следующая ошибка в консоли Chrome:

 Uncaught ReferenceError: firebase is not defined
    at localhost/:50
:58913/packages/firebase/src/top_level.dart.lib.js:78 Uncaught (in promise) TypeError: Cannot read property 'app' of undefined
    at Object.app$ [as app] (:58913/packages/firebase/src/top_level.dart.lib.js:78)
    at new cloud_firestore_web.FirebaseFirestoreWeb.new (:58913/packages/cloud_firestore_web/src/write_batch_web.dart.lib.js:755)
    at Function.registerWith (:58913/packages/cloud_firestore_web/src/write_batch_web.dart.lib.js:671)
    at Object.registerPlugins (:58913/packages/carlinehound/generated_plugin_registrant.dart.lib.js:23)
    at main (:58913/web_entrypoint.dart.lib.js:29)
    at main.next (<anonymous>)
  

Я использовал методы инициализации приложений Future Builder и Streambuilder FlutterFire. Я также просто инициализировал в main(). Все это приводит к одной и той же ошибке.

Проблема, очевидно, в том, что firebase не определена. Мой вопрос в том, как мне определить firebase?

Вы не указали полный номер версии при добавлении JS SDK в свой index.html

7.20.- это не настоящая версия, это просто заполнитель, в котором вы можете указать тот, который вы хотите использовать.

Вы можете проверить это, перейдя к src в вашем браузере. Вы увидите, что src те, которые у вас есть в настоящее время, не будут существовать. Те, которые я показываю ниже, покажут кучу JS.

Если вы хотите использовать последнюю версию, это будет 7.20.0.

 <!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-app.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-analytics.js"></script>


<script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-firestore.js"></script>


<script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-auth.js"></script>