Flutter Web集成Firebase SDK启动报reading 'app'相关错误如何解决

这个错误是Flutter Web的Firebase SDK无法读取全局window对象下的firebase实例导致的，触发原因有两个：

1. 你在index.html中使用ES模块化方式导入Firebase JS SDK，没有将firebase对象暴露到全局作用域，dart侧的firebase_core_web包无法读取到实例
2. 你使用的Firebase JS SDK版本（8.10.0）和pubspec.yaml中引入的firebase_core包版本不兼容

• 第一步：调整index.html的Firebase引入方式
  删除你现有的type="module"的Firebase引入脚本，将以下代码放在<body>标签内部、<script src="main.dart.js"></script>标签的前面：

<!-- 引入对应版本的Firebase JS SDK，这里以适配firebase_core 2.x的10.16.0版本为例 -->
<script src="https://www.gstatic.com/firebasejs/10.16.0/firebase-app.js"></script>
<!-- 如果你使用了其他Firebase服务，需要追加对应服务的引入，示例如下 -->
<!-- <script src="https://www.gstatic.com/firebasejs/10.16.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.16.0/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.16.0/firebase-storage.js"></script> -->
<script>
  // 替换为你自己的Firebase项目配置
  const firebaseConfig = {
    apiKey: "-----....-----",
    authDomain: "-----....-----",
    projectId: "-----....-----",
    storageBucket: "-----....-----",
    messagingSenderId: "-----....-----",
    appId: "-----....-----"
  };
  // 初始化全局Firebase实例
  firebase.initializeApp(firebaseConfig);
</script>

• 第二步：检查依赖版本匹配
  确保pubspec.yaml中firebase_core的版本和你引入的Firebase JS SDK版本兼容，参考对应关系：
  • firebase_core 2.x系列 -> Firebase JS SDK 9.0.0及以上版本
  • firebase_core 1.x系列 -> Firebase JS SDK 8.x版本
• 第三步：可选调整dart初始化代码
  如果修改完index.html后仍报错，可以将配置直接传入dart侧的初始化方法，示例如下：

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    // 替换为你自己的项目配置
    options: const FirebaseOptions(
      apiKey: "-----....-----",
      authDomain: "-----....-----",
      projectId: "-----....-----",
      storageBucket: "-----....-----",
      messagingSenderId: "-----....-----",
      appId: "-----....-----",
    ),
  );
  runApp(const MyApp());
}

• 第四步：清理缓存重启项目
  执行以下命令清理构建缓存后重新启动应用：

flutter clean
flutter pub get

重启时不要使用热重载，需完全冷启动项目。

内容的提问来源于stack exchange，提问作者user14085420