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

Question

I'm trying to use Firebase in my flutter web project.
But app can't be run with this message.

TypeError: dart.global.firebase.firestore is not a function
at Object.firestore$ [as firestore] 

My index.html looks like this.

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

<script>
  // Your web app's Firebase configuration
  var firebaseConfig = {
    apiKey: "MY_API_KEY",
    authDomain: "MY_AUTHDOMAIN",
    databaseURL: "MY_URL",
    projectId: "MY_ID",
    storageBucket: "MY_BUCKET",
    messagingSenderId: "MY_ID",
    appId: "MY_APPID",
    measurementId: "MY_ID"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();
</script>

Anyone knows how to fix this?

Solution 1

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>

Solution 2

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();
...

Solution 3

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

Solution 4

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.

Solution 5

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.

View more solutions