"Uncaught ReferenceError: firebase is not defined". How to define firebase and get beyond blank screen in Chrome?

Question

I am integrating Flutter web into an existing app. The existing app functions as expected on iOS and Android. The app utilizes FlutterFire. With the below, when running to Chrome device I get a blank white screen.

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>

This results in the following error in the VSCode console:

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

and the following error in the Chrome console:

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

I have used both the Future Builder and Streambuilder FlutterFire app initialization methods. I have also simply initialized in main(). All of these result in the same error.

The problem obviously is that firebase is not defined. My question is how do I define firebase?

Answer 1

You didn't specify a full version number when adding the JS SDK in your index.html

7.20.- is not a real version, it's just a placeholder for you to specify the one you want to use.

You can check this by going to the src in your browser. You'll see that the srcs you currently have will not exist. The ones I show below will show a bunch of JS.

If you want to use the latest version, that would be 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>