Flutter Web集成Firebase Auth/Firestore报'app' of undefined错误

报错产生原因 #

• 核心触发点：index.html 中直接编写了 firebase.initializeApp() 初始化代码，但没有提前加载对应Firebase Web端的JS SDK全局脚本，运行时全局上下文不存在firebase对象。当cloud_firestore_web等插件在注册阶段通过interop层调用firebase.app方法时，因firebase本身为undefined，直接抛出 TypeError: Cannot read property 'app' of undefined。
• 伴随的FormatException为连锁次生错误：主错误抛出后Dart入口执行流中断，后续资源请求路径被错误截断为带堆栈行号的无效字符串web_entrypoint.dart.lib.js:40:18，不符合URI解析规则，触发资源路径异常，无需单独处理该类报错。
• 配置隐患：pubspec.yaml中手动单独引入了firebase_auth_web依赖。Flutter官方Firebase插件采用联邦架构，会自动匹配对应平台的实现包，手动单独引入容易出现版本错位，加剧初始化异常。

解决步骤 #

• 调整index.html脚本加载顺序，严格按照以下逻辑排布：
  1. 先引入覆盖应用所需能力的Firebase JS SDK（含核心、Auth、Cloud Firestore、Cloud Storage模块）
  2. 执行firebase.initializeApp(firebaseConfig)完成全局Firebase初始化
  3. 最后引入main.dart.js启动Flutter应用
     注意：所有Firebase相关脚本的加载与执行，必须在main.dart.js之前完成，避免插件注册时全局Firebase对象未就绪。
• 修改pubspec.yaml依赖配置，删除手动单独引入的firebase_auth_web依赖，保留上层的firebase_core、firebase_auth、cloud_firestore、firebase_storage即可，由Flutter自动匹配对应平台的实现版本，避免版本错位。
• 清空项目缓存后重启应用，在项目根目录依次执行以下命令：
  • flutter clean
  • flutter pub get
  • flutter run -d chrome

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