Flutter Web - Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app)

Question

I have this error emessage No Firebase App '[DEFAULT]' has been created when I try to run the Flutter Web version, Chrome is blank after running the web app.

All my dependencies are uptodate. firebase_analytics: ^7.0.0 firebase_auth: ^1.0.0 firebase_storage: ^8.0.0 cloud_firestore: ^1.0.4

I added firebase.initializeApp()on Main.dart, I followed the guide No Firebase App '[DEFAULT]' has been created - call Firebase.initializeApp() in Flutter and Firebase

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await Firebase.initializeApp();


  final UserDataRepository userDataRepository = UserDataRepository();
  final AuthenticationRepository authenticationRepository =
      AuthenticationRepository();

  runApp(
    MultiBlocProvider(
      providers: [
        BlocProvider<OrdersBloc>(
          create: (context) => OrdersBloc(
            userDataRepository: userDataRepository,
          ),
        ),
        BlocProvider<NewOrdersBloc>(
          create: (context) => NewOrdersBloc(
            userDataRepository: userDataRepository,
          ),
        ),
        BlocProvider<PushNotificationsBloc>(
          create: (context) => PushNotificationsBloc(
            userDataRepository: userDataRepository,
          ),
        ),
      ],
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  final Future<FirebaseApp> initialization = Firebase.initializeApp();
  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarBrightness: Brightness.dark,
      statusBarColor: Colors.transparent,
      statusBarIconBrightness: Brightness.light,
    ));
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Grocery Store Admin',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        primaryColorDark: Color(0xFF090682),
        primaryColor: Color(0xFF060453),
        accentColor: Color(0xFFF90A0A),
        backgroundColor: Colors.white,
        canvasColor: Colors.white,
      ),
      initialRoute: '/',
      routes: {
        '/': (context) => SplashScreen(),
        '/initial_setup': (context) => InitialSetupScreen(),
        '/splash_screen': (context) => SplashScreen(),
        '/home': (context) => HomeScreen(),
        '/sign_in': (context) => SignInScreen(),
      },
    );
  }
}

I believe my issue could be in the HTML create to generate Web Version of my App. Can you please support to indicate where

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="description" content="A new Flutter project.">

  <!-- iOS meta tags & icons -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="grocery_store_admin">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">

  <!-- Favicon -->
  <link rel="shortcut icon" type="image/png" href="favicon.png"/>

  <title>grocery_store_admin</title>
  <link rel="manifest" href="manifest.json">
</head>
<body>
    <!-- The core Firebase JS SDK is always required and must be listed first -->
    <script src="https://www.gstatic.com/firebasejs/7.15.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.15.1/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.15.1/firebase-firestore.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.15.2/firebase-storage.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.15.1/firebase-analytics.js"></script>

    
  <!-- This script installs service_worker.js to provide PWA functionality to
       application. For more information, see:
       https://developers.google.com/web/fundamentals/primers/service-workers -->
  <script>
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', function () {
        navigator.serviceWorker.register('flutter_service_worker.js');
      });
    }
  </script>
  <script src="main.dart.js" type="application/javascript"></script>
</body>
</html>




[![enter image description here][1]][1]


  [1]: https://i.stack.imgur.com/bDUy8.png

score 2 · Accepted Answer · answered Apr 18 '21 at 17:24

Please add your firebase web config file to your index.html

Ex:

<body>
    <!-- The core Firebase JS SDK is always required and must be listed first -->
    <script src="https://www.gstatic.com/firebasejs/7.15.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.15.1/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.15.1/firebase-firestore.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.15.2/firebase-storage.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.15.1/firebase-analytics.js"></script>
  <script>
      var firebaseConfig = {
        apiKey: "...",
        authDomain: "[YOUR_PROJECT].firebaseapp.com",
        databaseURL: "https://[YOUR_PROJECT].firebaseio.com",
        projectId: "[YOUR_PROJECT]",
        storageBucket: "[YOUR_PROJECT].appspot.com",
        messagingSenderId: "...",
        appId: "1:...:web:...",
        measurementId: "G-...",
      };

      // Initialize Firebase
      firebase.initializeApp(firebaseConfig);
    </script>
    
  <!-- This script installs service_worker.js to provide PWA functionality to
       application. For more information, see:
       https://developers.google.com/web/fundamentals/primers/service-workers -->
  <script>
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', function () {
        navigator.serviceWorker.register('flutter_service_worker.js');
      });
    }
  </script>
  <script src="main.dart.js" type="application/javascript"></script>
</body>

Refer https://firebase.flutter.dev/docs/installation/web#initializing-firebase

now the error message is the following -TypeError: dart.global.firebase.firestore is not a function at Object.getFirestoreInstance — J L, Apr 18 '21 at 21:13

Flutter Web - Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app)

1 Answers1