I failed flutter web build

Issue

I'm going to use flutter web and firebase. I'm going to do a simple build test, but if I build it, It stops at 'await ui.webOnlyInitializePlatform();' of web_entrypoint.dart.

pubspec.yaml

environment:
  sdk: ">=2.12.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2

    provider: ^6.0.1
    firebase_auth: ^3.1.1
    cloud_firestore: ^2.5.2
    firebase_storage: ^8.0.3
    #  google_sign_in: ^5.1.0
    firebase_core: ^1.6.0
    cached_network_image: ^3.1.0
    carousel_slider: ^4.0.0
    get: ^4.3.8
    flutter_web_frame: ^0.0.2 

main.dart

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  // Firebase.initializeApp();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return FlutterWebFrame(
      builder: (context) {
        return MaterialApp(
          home: Scaffold(
            appBar: AppBar(
              title: Text('Title 123'),
            ),
            body: Center(
              child: Text('Body Text'),
            ),
          ),
        );
      },
      maximumSize: Size(768.0, 1024.0), // Maximum size
      enabled: true, // default is enable, when disable content is full size
      backgroundColor: Colors.grey, // Background color/white space
    );
  }
}

index.html

</script>

<!--firebase-->
<script src = "https://www.gstatic.com/firebasejs/9.2.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.2.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.2.0/firebase-firestore.js"</script>
<script src="https://www.gstatic.com/firebasejs/9.2.0/firebase-storage.js"></script>

<script>
  var firebaseConfig = {
    apiKey: ,
    authDomain: ,
    projectId: ,
    storageBucket: ,
    messagingSenderId: ,
    appId: ,
    measurementId: 
  };

  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.getAnalytics(app);

</script>

</body>
</html>

When build from Chrome, debug stops here.

// @dart=2.12
// Flutter web bootstrap script for package:omd_test/main.dart.

import 'dart:ui' as ui;
import 'dart:async';

import 'package:omd_test/main.dart' as entrypoint;
import 'package:flutter_web_plugins/flutter_web_plugins.dart';
import 'package:omd_test/generated_plugin_registrant.dart';

typedef _UnaryFunction = dynamic Function(List<String> args);
typedef _NullaryFunction = dynamic Function();
Future<void> main() async {
  registerPlugins(webPluginRegistrar);
  await ui.webOnlyInitializePlatform(); //debug stop here
  if (entrypoint.main is _UnaryFunction) {
    return (entrypoint.main as _UnaryFunction)(<String>[]);
  }
  return (entrypoint.main as _NullaryFunction)();
}

If I 'step over' after the debugger stops, the following error is output.

TypeError: Cannot read properties of undefined (reading 'app')

May I know the cause and solution of this problem? Thank you.

Solution

I would try using the setup recommended by Flutter Firebase docs so downgrade to 8.6.1.

<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-storage.js"></script>
<script>
  const firebaseConfig = {
    apiKey: "API KEY",
    authDomain: "AUTH",
    projectId: "PROJECT_ID",
    // ... and so on
  };

  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
</script>

Flutter plugins usually lag behind official JS distribution as they need to adapt to new libraries. Also make sure you are initializing your Firebase app before you run the main app script tag.

Answered By - pr0gramist