Flutter :[cloud_firestore/unknown] NoSuchMethodError: invalid member on null: 'includeMetadataChanges' (Flutter Web)

Question

I am trying to fetch data from Friebase-firestore and then convert it to model, I used the same code and approach to another project (web project) ,it works fine , but with this project it doesn't work ,I don't know why. I upgrade flutter version, run Flutter doctor , and nothing wrong with the environment setup. here is the code :

class dbService{

static final CollectionReference myCollection = 
  FirebaseFirestore.instance.collection('myCollection');

static Future<myModel> getMyInfo() async{
myModel sanaa ;
print('this line to print');
final QuerySnapshot myInfo =await myCollection.limit(1).get();
myInfo.docs.forEach((element) {
  print(element.data()['name']);
 sanaa= new myModel(
      name:element.data()['name'].toString(),
      title: element.data()["title"].toString(),
      img: element.data()['img'].toString(),
     );
  print('\n print  ------ ');
  print(element.data()['name']);
  print('   that is');
}

);
return sanaa;

}
}
class dbManager{
 Stream<myModel> myInfoStream() async*{
 yield await dbService.getMyInfo();
 }
}
   class _aboutStateState extends State<aboutState> { 
   Stream stream ;
   dbManager mng = new dbManager();
  @override
   void initState() {
   // TODO: implement initState
    stream = mng.myInfoStream();
    super.initState();
   }
    @override
  Widget build(BuildContext context) {
    return Container(
    color: Colors.pink[300],
    child: StreamBuilder<myModel>(
     stream: stream,
     builder: (context, snapshot){
       if(snapshot.hasError){
         print(snapshot.error);
        return Center(child: Text('Something went wrong , please try again later'),);
      }
      else if(snapshot.hasData){
  
        return  Text("${snapshot.data.name}");
      
      }
      else {
        return Center(child: CircularProgressIndicator());
      }
    },
  ),

I got this error

this line to print
[cloud_firestore/unknown] NoSuchMethodError: invalid member on null: 'includeMetadataChanges'

but when I connect directly to the firestore without converting it into model ,It works fine and print the data in the screen , the code :

child:FutureBuilder(
   future: me.doc(id).get(),
    
    builder: (context, snapshot){
      if(snapshot.hasError){
        print(snapshot.error);
        return Center(child: Text('Something went wrong , please try again later'),);
      }
      else if(snapshot.hasData){
       // print("${snapshot.data.data()['app_pics'][1]}  \n${snapshot.data.data()['img']}");
        return  Text("${snapshot.data.data()['app_pics'][1]}");
        
      }
      else {
        return Center(child: CircularProgressIndicator());
      }
    },
  ),

I run flutter doctor

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel beta, 1.24.0-10.2.pre, on Microsoft Windows [Version 6.3.9600], locale
  en-US)
[√] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
[√] Chrome - develop for the web
[√] Android Studio (version 4.0)
[√] VS Code (version 1.51.0)
[√] Connected device (3 available)

• No issues found!

Please I need help

Answer 1

I found the answer, it caused because of the version of Firebase JS SDK . I replace 8.1.1 to 7.22.1 in index.html file

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

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

I am using 7.22.1 version for Firebase JS SDK

<script src="https://www.gstatic.com/firebasejs/7.22.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/7.22.1/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.22.1/firebase-analytics.js"></script>

Answer 2

You can also use 8.0.1 as mentioned here and subscribe to the issue. Then you get (hopefully) notified once it´s fixed.

https://github.com/FirebaseExtended/flutterfire/issues/4127#issuecomment-754171740

Answer 3

Try out this versions:

firebase_core: ^0.5.2
cloud_firestore: ^0.14.3

For more info check out this github Link