Flutter Web Firebase TypeError: dart.global.firebase.firestore is not a function

As mentioned in the docs, add this line in index.html:

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

I had the same thing, to fix it just add this in the index.html at the bottom:

...
<script src="https://www.gstatic.com/firebasejs/7.17.1/firebase-firestore.js"></script>
  <script src="main.dart.js" type="application/javascript"></script>
...

just make sure it's after:

....
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();
...

I think what you are missing is the Firestore SDK to solve that Just go to this URL if you will go with CDN

Available Firebase JS SDKs (from the CDN)

then add whatever library you are using for your case it's Firestore so it should be this one:

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

add it on the top of your body

In latest version of FlutterFire, I found these issues and unable to resolve. I resolved this issues while downgrading the dependencies of FlutterFire . Since these are in beta version , we will face these issues. Hope in upcoming version of flutterfire ,these issues will resolve. Follow these steps:--

1) Add these dependencies in pubsec.yaml file.

  firebase_core: ^0.5.0
  firebase_auth: ^0.18.0+1
  cloud_firestore: ^0.14.3+1

2) Then add these scripts in index.html file.

  <script src="https://www.gstatic.com/firebasejs/8.1.1/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.1.1/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.1.1/firebase-analytics.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.1.1/firebase-firestore.js"></script>

3) After that Add these scripts before main.dart.js scripts.

 <script>
  // Your web app's Firebase configuration
  // For Firebase JS SDK v7.20.0 and later, measurementId is optional
  var firebaseConfig = {
    apiKey: "your api key",
    authDomain: "app_name.firebaseapp.com",
    projectId: "app_name2",
    storageBucket: "app_name.appspot.com",
    messagingSenderId: "882321312y",
    appId: "1:1782944473493525:web:923488234",
    measurementId: "G-4dmfnsd"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();
  </script>

Note:- This file is a generated file while adding WebApp to existing Flutter Project on Firebase Console.

You have to add ALL the CDN's you need from Firebase. Not only the ones in the example.

If you didn't do it yet, you have to:

1. Go to your Firebase Console
2. Create a new Web App for your project if you didn't Project settings Web App (The one you created)
3. Select CDN and copy and paste it in your index.html inside body, before the <script> 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 my case they were firebase-auth.js and firebase-firestore.js. But don't copy it from a reply here because it could be outdated. You can copy the path for your firebase-app.js which includes the current version. Mine is <script src="https://www.gstatic.com/firebasejs/8.4.2/firebase-app.js"> meaning my current version is 8.4.2 that could not be your case.

insert this script at first before you use any other script because this script needs to get call first then other firebase scripts.

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

For anyone else that arrives here, and is just starting with Firebase, you may not have setup your firebase configuration correctly (e.g you're following a tutorial on running Firebase in say, Flutter)

If so, make sure you follow steps like so to add your firebase app configuration info to your HTML file

In short:

• In the Firebase console, select Project Overview in the left navigation bar, and click the Web button under Get started by adding Firebase to your app.
• Give your app a nickname. This is the value that is used across the Firestore console to identify the web version of your app.
• Click Register app.
• After you register your app, the Add Firebase SDK step gives you some code you need to paste into the web/index.html file of your app. Do so!

check the order/presence of tags ,in the following picture :

check this for latest versions : Firebase JS SDKs(from CDN)

check your pubspec.yaml, and import all firebase module. I means, if you have firebase_auth in your pubspec.yaml, you should also import script https://www.gstatic.com/firebasejs/VERSION/firebase-auth.js

FYI, here is the list: https://firebase.google.com/docs/hosting/reserved-urls

Every service needs its own CDN import

Just changing values to latest version from 8.6.2 to 8.10.0 solve my error.

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