Firebase firestore on Flutter Web NoSuchMethodError. 'docs' - firebase

Question

I'm trying to run my flutter chat app on web but I encountered this error
════════ Exception caught by widgets library ═══════════════════════════════════
'docs'
method not found
Receiver: null
Arguments: []
The relevant error-causing widget was
StreamBuilder
Error Message Screenshot
It is working on my android emulator so maybe there's missing on my web configuration so what I've tried is adding the firebase on my index.html and following https://stackoverflow.com/a/67518124/15916393 advice but still the error occurs.
<script src="https://www.gstatic.com/firebasejs/8.8.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.8.1/firebase-messaging.js"></script>
here is my code
class Messages extends StatelessWidget {
#override
Widget build(BuildContext context) {
final user = FirebaseAuth.instance.currentUser;
return StreamBuilder(
stream: FirebaseFirestore.instance
.collection('chat')
.orderBy(
'createdAt',
descending: true,
)
.snapshots(),
builder: (ctx, chatSnapshot) {
if (chatSnapshot.connectionState == ConnectionState.waiting) {
return Center(
child: CircularProgressIndicator(),
);
}
final chatDocs = chatSnapshot.data.docs ?? 'default data';
return ListView.builder(
reverse: true,
itemCount: chatDocs.length,
itemBuilder: (ctx, index) => MessageBubble(
chatDocs[index].data()['text'],
chatDocs[index].data()['username'],
chatDocs[index].data()['userImage'],
chatDocs[index].data()['userId'] == user.uid,
key: ValueKey(chatDocs[index].id),
),
);
},
);
}
}

Answer 1

You're ignoring the case where there is an error in loading the data
builder: (ctx, chatSnapshot) {
if (chatSnapshot.connectionState == ConnectionState.waiting) {
return Center(
child: CircularProgressIndicator(),
);
}
// 👇 Check if there was an error
if (snapshot.hasError) {
return Text('Error loading data: ${snapshot.error!}');
}
final chatDocs = chatSnapshot.data.docs ?? 'default data';
...
I highly recommend following the patterns outline in the samples in the FlutterFire documentation like the above from reading realtime changes.