我失败了颤振网络构建答案

【问题标题】：I failed flutter web build我失败了颤振网络构建
【发布时间】：2021-12-16 09:41:07
【问题描述】：

我将使用 Flutter Web 和 Firebase。我要做一个简单的构建测试，但如果我构建它，它停在'await ui.webOnlyInitializePlatform();' 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>

从 Chrome 构建时，调试会在此处停止。

// @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)();
}

如果我在调试器停止后“跳过”，则会输出以下错误。

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

我可以知道这个问题的原因和解决方法吗？谢谢。

【问题讨论】：

标签： firebase flutter web

【解决方案1】：

我会尝试使用Flutter Firebase docs 推荐的设置，因此降级到 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 插件通常落后于官方 JS 发行版，因为它们需要适应新的库。还要确保在运行主应用 script 标记之前初始化 Firebase 应用。

【讨论】：