TypeError: dart.global.firebase.firestore is not a function

user_15901533 0
Viewed 717

I have been dealing with this issue for ever and none of the past posts on the problem proved helpful.

Here is my index.html

<!DOCTYPE html>
<html>
<head>
  <!--
    If you are serving your web app in a path other than the root, change the
    href value below to reflect the base path you are serving from.
    The path provided below has to start and end with a slash "/" in order for
    it to work correctly.
    Fore more details:
    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
  -->
  <base href="/">

  <meta charset="UTF-8">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="description" content="A new Flutter project.">

  <!-- 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="flutter_4paul">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">

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

  <title>flutter_4paul</title>
  <link rel="manifest" href="manifest.json">



    <!-- 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 src="https://www.gstatic.com/firebasejs/8.6.1/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/8.6.1/firebase-auth.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-database.js"></script>



  <script>
    // Your web app's Firebase configuration
    // For Firebase JS SDK v7.20.0 and later, measurementId is optional
    var firebaseConfig = {
      my config stuff here
    };
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);

  </script>
</head>
<body>
  <script>
    if ('serviceWorker' in navigator) {
      window.addEventListener('flutter-first-frame', function () {
        navigator.serviceWorker.register('flutter_service_worker.js');
      });
    }
  </script>

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

and here is my pubspec.yaml

name: flutter_4paul
description: A new Flutter project.

# The following line prevents the package from being accidentally published to
# pub.dev using `pub publish`. This is preferred for private packages.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev

# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
version: 1.0.0+1

environment:
  sdk: ">=2.7.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.2
  firebase: ^9.0.1
  firebase_core: ^1.2.0
  
  firebase_auth: ^1.2.0
  cloud_firestore: "^2.2.0"
  firebase_storage: ^8.1.0
  flutter_login: ^1.0.10
  
  
dev_dependencies:
  flutter_test:
    sdk: flutter

# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec
# The following section is specific to Flutter.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
    - assets/logo.gif

Previous posts show this bug usually happens when missing

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

however as you can see that is present in my index.html so I am not sure what is the issue here.

Thank You!

google-cloud-firestore firebase dart flutter javascript
2 Answers

You should add ALL the CDNs your project needs from Firebase, I don’t recommend you to add the ones you find in other examples.

To start, in case you didn't do it yet, you should: Go to your Firebase Console Create a new Web App for your project (if you didn't) Project settings Web App (The one you created) Select CDN and copy and paste it in your index.html inside body, before the tag containing the main.dart.js If you did it, and it is still not working it is because you need to add the CDN for the other services you are using.

In your case, I see you have added the next CDNs:

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

I see in your pubspec.yaml you are using firebase-storage.js as well, but it is not added. Could you try to add it in your index.html?

<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-storage.js"></script>
user_160244970
user_133290450
Related