Flutter 中有“TypeError: Cannot read properties of undefined (reading 'firestore')”

Question

Firebase Version: 11.8.0 Ubuntu 22.04 Below is my reproducable code snippet

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:cloud_functions/cloud_functions.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:firebase_storage/firebase_storage.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:g_recaptcha_v3/g_recaptcha_v3.dart';
import 'package:tranzek/Constants/rotalar.dart';
import 'package:tranzek/Screens/error_page.dart';
import 'package:tranzek/theme.dart';
import 'package:url_strategy/url_strategy.dart';


const bool useEMULATOR = true;

Future<void> main() async {
  RenderErrorBox.backgroundColor = Colors.blueAccent;
  WidgetsFlutterBinding.ensureInitialized();

  if (kIsWeb) {
    await Firebase.initializeApp(
      options: const FirebaseOptions(
        apiKey: "",
        authDomain: "",
        appId: "",
        messagingSenderId: "",
        projectId: "",
        storageBucket: "",
        measurementId: "",
      ),
    );
    if (useEMULATOR) {
      await _connectToFirebaseEmulator();
    }
  }

 
  setPathUrlStrategy();
  await GRecaptchaV3.ready("");
  runApp(
    ProviderScope(
      child: const MyApp(),
    ),
  );
}

Future _connectToFirebaseEmulator() async {
  FirebaseFirestore.instance.settings = Settings(
    host: 'localhost:8080',
    sslEnabled: false,
    persistenceEnabled: false,
  );

  await FirebaseAuth.instance.useAuthEmulator('localhost', 9099);
  FirebaseFunctions.instance.useFunctionsEmulator('localhost', 5001);
  await FirebaseStorage.instance.useStorageEmulator('localhost', 9199);
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: myThemaData(),
      title: 'MyTitle',
      initialRoute: Rotalar.webHomePage,
      onGenerateRoute: Rotalar.generateRoute,
      onUnknownRoute: (RouteSettings settings) =>
          MaterialPageRoute(builder: (context) => Error_Page()),
      debugShowCheckedModeBanner: false,
    );
  }
}

I properly start firebase emulator with firebase emulators:start Initialisation of firebase log as follows:

i  emulators: Starting emulators: auth, functions, firestore, hosting, storage
⚠  functions: The following emulators are not running, calls to these services from the Functions emulator will affect production: database, pubsub, eventarc
✔  functions: Using node@16 from host.
i  firestore: Firestore Emulator logging to firestore-debug.log
i  hosting: Serving hosting files from: build/web
✔  hosting: Local server: http://localhost:5000
i  ui: Emulator UI logging to ui-debug.log
i  functions: Watching "/home/focuser/tranzek/functions/" for Cloud Functions...
✔  functions: Loaded functions definitions from source: createFreePack, sendTeamRequest, registerTranzek, acceptTeamRequest, deleteTeamMember, buyPackage, iremPdf, iCagPdf, iCollPdf, iAcceptPdf, iAcceptPayPdf, iAcceptPayPdfDelete, iAcceptAvailPdf, iLcPayPdf, iLcPayPdfDelete, iLcDiscrepancyPdf, iLcIssuePdf, iLcDraftPdf, iGuaranPayPdf, iGuaranPayPdfDelete, iGuaranDraftPdf, iGuaranIssuePdf, iInstructionPdf, iInstructionPdfDelete, iTranzekLogOnCreate, iTranzekLogOnUpdate, iTranzekLogOnDelete, eTranzekLogOnCreate, eTranzekLogOnUpdate, eTranzekLogOnDelete, iStorageFileOnCreate, iStorageFileOnUpdate, iStorageFileOnDelete, eStorageFileOnCreate, eStorageFileOnUpdate, eStorageFileOnDelete, eRemRecPdf, eInstructionPdf, eInstructionPdfDelete, eCollPdf, eCollRecPdf, eAcceptPdf, eAcceptRecPdf, eAcceptRecPdfDelete, eCagRecPdf, eLcDiscrepancyPdf, eLcDiscrepancyPdfDelete, eLcConfirmPdf, eLcConfirmPdfDelete, eLcWithoutPdf, eLcWithoutPdfDelete, eLcRecPdf, eLcRecPdfDelete, eLcAddReqPdf, eGuaranRecPdf, eGuaranDrawPdf.
✔  functions[us-central1-createFreePack]: auth function initialized.
✔  functions[us-central1-sendTeamRequest]: firestore function initialized.
✔  functions[us-central1-registerTranzek]: firestore function initialized.
✔  functions[us-central1-acceptTeamRequest]: firestore function initialized.
✔  functions[us-central1-deleteTeamMember]: firestore function initialized.
✔  functions[us-central1-buyPackage]: firestore function initialized.
✔  functions[us-central1-iremPdf]: firestore function initialized.
✔  functions[us-central1-iCagPdf]: firestore function initialized.
✔  functions[us-central1-iCollPdf]: firestore function initialized.
✔  functions[us-central1-iAcceptPdf]: firestore function initialized.
✔  functions[us-central1-iAcceptPayPdf]: firestore function initialized.
✔  functions[us-central1-iAcceptPayPdfDelete]: firestore function initialized.
✔  functions[us-central1-iAcceptAvailPdf]: firestore function initialized.
✔  functions[us-central1-iLcPayPdf]: firestore function initialized.
✔  functions[us-central1-iLcPayPdfDelete]: firestore function initialized.
✔  functions[us-central1-iLcDiscrepancyPdf]: firestore function initialized.
✔  functions[us-central1-iLcIssuePdf]: firestore function initialized.
✔  functions[us-central1-iLcDraftPdf]: firestore function initialized.
✔  functions[us-central1-iGuaranPayPdf]: firestore function initialized.
✔  functions[us-central1-iGuaranPayPdfDelete]: firestore function initialized.
✔  functions[us-central1-iGuaranDraftPdf]: firestore function initialized.
✔  functions[us-central1-iGuaranIssuePdf]: firestore function initialized.
✔  functions[us-central1-iInstructionPdf]: firestore function initialized.
✔  functions[us-central1-iInstructionPdfDelete]: firestore function initialized.
✔  functions[us-central1-iTranzekLogOnCreate]: firestore function initialized.
✔  functions[us-central1-iTranzekLogOnUpdate]: firestore function initialized.
✔  functions[us-central1-iTranzekLogOnDelete]: firestore function initialized.
✔  functions[us-central1-eTranzekLogOnCreate]: firestore function initialized.
✔  functions[us-central1-eTranzekLogOnUpdate]: firestore function initialized.
✔  functions[us-central1-eTranzekLogOnDelete]: firestore function initialized.
✔  functions[us-central1-iStorageFileOnCreate]: firestore function initialized.
✔  functions[us-central1-iStorageFileOnUpdate]: firestore function initialized.
✔  functions[us-central1-iStorageFileOnDelete]: firestore function initialized.
✔  functions[us-central1-eStorageFileOnCreate]: firestore function initialized.
✔  functions[us-central1-eStorageFileOnUpdate]: firestore function initialized.
✔  functions[us-central1-eStorageFileOnDelete]: firestore function initialized.
✔  functions[us-central1-eRemRecPdf]: firestore function initialized.
✔  functions[us-central1-eInstructionPdf]: firestore function initialized.
✔  functions[us-central1-eInstructionPdfDelete]: firestore function initialized.
✔  functions[us-central1-eCollPdf]: firestore function initialized.
✔  functions[us-central1-eCollRecPdf]: firestore function initialized.
✔  functions[us-central1-eAcceptPdf]: firestore function initialized.
✔  functions[us-central1-eAcceptRecPdf]: firestore function initialized.
✔  functions[us-central1-eAcceptRecPdfDelete]: firestore function initialized.
✔  functions[us-central1-eCagRecPdf]: firestore function initialized.
✔  functions[us-central1-eLcDiscrepancyPdf]: firestore function initialized.
✔  functions[us-central1-eLcDiscrepancyPdfDelete]: firestore function initialized.
✔  functions[us-central1-eLcConfirmPdf]: firestore function initialized.
✔  functions[us-central1-eLcConfirmPdfDelete]: firestore function initialized.
✔  functions[us-central1-eLcWithoutPdf]: firestore function initialized.
✔  functions[us-central1-eLcWithoutPdfDelete]: firestore function initialized.
✔  functions[us-central1-eLcRecPdf]: firestore function initialized.
✔  functions[us-central1-eLcRecPdfDelete]: firestore function initialized.
✔  functions[us-central1-eLcAddReqPdf]: firestore function initialized.
✔  functions[us-central1-eGuaranRecPdf]: firestore function initialized.
✔  functions[us-central1-eGuaranDrawPdf]: firestore function initialized.

┌─────────────────────────────────────────────────────────────┐
│ ✔  All emulators ready! It is now safe to connect your app. │
│ i  View Emulator UI at http://localhost:4000                │
└─────────────────────────────────────────────────────────────┘

┌────────────────┬────────────────┬─────────────────────────────────┐
│ Emulator       │ Host:Port      │ View in Emulator UI             │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Authentication │ localhost:9099 │ http://localhost:4000/auth      │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Functions      │ localhost:5001 │ http://localhost:4000/functions │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Firestore      │ localhost:8080 │ http://localhost:4000/firestore │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Hosting        │ localhost:5000 │ n/a                             │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Storage        │ localhost:9199 │ http://localhost:4000/storage   │
└────────────────┴────────────────┴─────────────────────────────────┘
  Emulator Hub running at localhost:4400
  Other reserved ports: 4500

Issues? Report them at https://github.com/firebase/firebase-tools/issues and attach the *-debug.log files.

After starting the code with Ctrl-F5 in VsCode Debug Console Shows below log:

Launching lib/main.dart on Chrome in debug mode...
lib/main.dart:1
This app is linked to the debug service: ws://127.0.0.1:46027/FMUm7fUeSrc=/ws
Debug service listening on ws://127.0.0.1:46027/FMUm7fUeSrc=/ws
💪 Running with sound null safety 💪
Connecting to VM Service at ws://127.0.0.1:46027/FMUm7fUeSrc=/ws
Flutter Web Bootstrap: Auto
TypeError: Cannot read properties of undefined (reading 'firestore')
packages/cloud_firestore_web/src/interop/firestore.dart 27:26        getFirestoreInstance
packages/cloud_firestore_web/cloud_firestore_web.dart 35:27          get [_delegate]
packages/cloud_firestore_web/cloud_firestore_web.dart 134:17         set settings
packages/cloud_firestore/src/firestore.dart 235:15                   set settings
packages/tranzek/main.dart 56:30                                     _connectToFirebaseEmulator
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 84:54   runBody
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 123:5   _async
packages/tranzek/main.dart 55:34                                     _connectToFirebaseEmulator
packages/tranzek/main.dart 40:13                                     main$
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 45:50   <fn>
dart-sdk/lib/async/zone.dart 1653:54                                 runUnary
dart-sdk/lib/async/future_impl.dart 147:18                           handleValue
dart-sdk/lib/async/future_impl.dart 766:44                           handleValueCallback
dart-sdk/lib/async/future_impl.dart 795:13                           _propagateToListeners
dart-sdk/lib/async/future_impl.dart 566:5                            [_completeWithValue]
dart-sdk/lib/async/future.dart 528:22                                <fn>
dart-sdk/lib/async/zone.dart 1653:54                                 runUnary
dart-sdk/lib/async/future_impl.dart 147:18                           handleValue
dart-sdk/lib/async/future_impl.dart 766:44                           handleValueCallback
dart-sdk/lib/async/future_impl.dart 795:13                           _propagateToListeners
dart-sdk/lib/async/future_impl.dart 566:5                            [_completeWithValue]
dart-sdk/lib/async/future_impl.dart 639:7                            callback
dart-sdk/lib/async/schedule_microtask.dart 40:11                     _microtaskLoop
dart-sdk/lib/async/schedule_microtask.dart 49:5                      _startMicrotaskLoop
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 166:15  <fn>

Expected behaviour of the code is to show initialRoute. It is web home page. But it is a blank page shown but not my regular web page as initial route page.

Below error listed on Debug Console log.

There is "TypeError: Cannot read properties of undefined (reading 'firestore')"

The same error listed on inspected web page's log.

I downgraded firebase packages to previous versions when the code worked. But it doesn't work.

Answer 1

I have solved the problem by upgrading flutter packages to major versions. Sometimes things are so much easy!