Flutter Web集成Firebase9.0.1报firebase未定义无法初始化求助

我在Flutter项目中无法完成Firebase初始化操作，已尝试导入firebase-app.js、firebase-auth.js和firebase-analytics.js均未解决问题，当前使用的版本为*Firebase 9.0.1*。该报错已困扰我一周，尝试了StackOverflow上的所有相关方案，也查阅了Firebase和Flutter的官方文档均无效，下方附构建运行时的报错截图。

另外我已在Firebase控制台启用了firebase functions功能，目前暂未在项目中使用该能力，请问是否必须提前导入对应依赖？
首次执行flutter run -d chrome的报错输出如下：

相关代码 #

main.dart代码 #

import 'package:flutter/material.dart';
import 'package:devcom/auth.dart';
import 'package:devcom/auth_provider.dart';
import 'package:devcom/root_page.dart';
import 'package:firebase_core/firebase_core.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AuthProvider(
      auth: Auth(),
      child: MaterialApp(
        title: 'Flutter login demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: RootPage(),
      ),
    );
  }
}

index.html代码 #

<!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="devcom">
    <link rel="apple-touch-icon" href="icons/Icon-192.png">
  
    <!-- Favicon -->
    <link rel="shortcut icon" type="image/png" href="favicon.png" />
  
    <title>Devcom</title>
    <link rel="manifest" href="manifest.json">
  </head>
<body > 
    <script src="https://www.gstatic.com/firebasejs/9.0.1/firebase-app.js" type = "module"></script>
    <script src="https://www.gstatic.com/firebasejs/9.0.1/firebase-analytics.js" type="module"> </script>
    <script src="https://www.gstatic.com/firebasejs/9.0.1/firebase-auth.js" type = "module"></script>
    <script src="https://www.gstatic.com/firebasejs/9.0.1/firebase-firestore.js" type="module"></script>
  <!-- The core Firebase JS SDK is always required and must be listed first --><script> var firebaseConfig = {
      apiKey: "...",
      authDomain: "......",
      databaseURL: ".....",
      projectId: "...",
      storageBucket: "",
      messagingSenderId: "",
      measurementId: "",
      appId: "1:.........:web:...........",
    };
    firebase.initializeApp(firebaseConfig); // the error is pointing out this line for the cause 
    firebase.analytics();
</script><script>
var serviceWorkerVersion = null;
var scriptLoaded = false;
function loadMainDartJs() {
  if (scriptLoaded) {
    return;
  }
  scriptLoaded = true;
  var scriptTag = document.createElement('script');
  scriptTag.src = 'main.dart.js';
  scriptTag.type = 'application/javascript';
  document.body.append(scriptTag);
}

if ('serviceWorker' in navigator) {
  // Service workers are supported. Use them.
  window.addEventListener('load', function () {
    // Wait for registration to finish before dropping the <script> tag.
    // Otherwise, the browser will load the script multiple times,
    // potentially different versions.
    var serviceWorkerUrl = 'flutter_service_worker.js?v=' + serviceWorkerVersion;
    navigator.serviceWorker.register(serviceWorkerUrl)
      .then((reg) => {
        function waitForActivation(serviceWorker) {
          serviceWorker.addEventListener('statechange', () => {
            if (serviceWorker.state == 'activated') {
              console.log('Installed new service worker.');
              loadMainDartJs();
            }
          });
        }
        if (!reg.active && (reg.installing || reg.waiting)) {
          // No active web worker and we have installed or are 
          installing
          // one for the first time. Simply wait for it to activate.
          waitForActivation(reg.installing ?? reg.waiting);
        } else if 
        (!reg.active.scriptURL.endsWith(serviceWorkerVersion)) {
          // When the app updates the serviceWorkerVersion changes, 
          so we
          // need to ask the service worker to update.
          console.log('New service worker available.');
          reg.update();
          waitForActivation(reg.installing);
        } else {
          // Existing service worker is still good.
          console.log('Loading app from service worker.');
          loadMainDartJs();
        }
      });

    // If service worker doesn't succeed in a reasonable amount of time,
    // fallback to plaint <script> tag.
    setTimeout(() => {
      if (!scriptLoaded) {
        console.warn(
          'Failed to load app from service worker. Falling back to plain <script> tag.',
        );
        loadMainDartJs();
      }
    }, 4000);
  });
} else {
  // Service workers not supported. Just drop the <script> tag.
  loadMainDartJs();
}
</script>
</body>
</html>

pubspec.yaml配置 #

dependencies:
  flutter:
    sdk: flutter
  firebase_auth: 
  cupertino_icons: 
  firebase_core: 
  firebase_core_web:
  firebase_auth_web:
    
dev_dependencies:
  flutter_test:
    sdk: flutter
  mockito:

已尝试操作反馈 #

切换为8.7.1版本后抛出报错：Failed to load resource: net::ERR_NAME_NOT_RESOLVED

核心问题原因 #

Firebase 9.x为模块化版本，默认导出的是ESM模块，你在引入JS SDK时加了type="module"属性，但后续初始化用的是Firebase 8.x的命名空间写法firebase.initializeApp()，全局firebase对象不存在，所以直接报错。

修复步骤 #

• 统一使用兼容版本：目前Flutter官方Firebase插件对Web端的适配最优是Firebase JS SDK 8.x版本，先把所有JS引入的版本改为8.7.1，去掉type="module"属性，修改后的index.html中Firebase引入部分如下：

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

• 解决8.x版本的ERR_NAME_NOT_RESOLVED报错：这个报错是DNS解析失败导致的，排查两点：1. 确认当前网络可以正常访问gstatic.com，可尝试切换网络或清理本地DNS缓存后重试；2. 检查firebaseConfig内的storageBucket、messagingSenderId等值是否完整，不要留空，所有参数都要从Firebase控制台的Web项目配置中完整复制
• 删除重复初始化逻辑：你已经在main.dart中调用了Firebase.initializeApp()，不需要在index.html中再手动调用firebase.initializeApp(firebaseConfig)和firebase.analytics()，把这两行删掉即可，Flutter的firebase_core插件会自动完成初始化
• 固定pubspec依赖版本：在pubspec.yaml中明确指定依赖版本，避免版本兼容问题，参考配置：

dependencies:
  flutter:
    sdk: flutter
  firebase_auth: ^3.1.1
  cupertino_icons: ^1.0.4
  firebase_core: ^1.7.0
  firebase_core_web: ^1.1.0
  firebase_auth_web: ^3.1.1

修改后执行flutter clean，再重新运行即可。

关于Firebase Functions的疑问 #

如果暂时不需要使用Functions能力，不需要提前导入对应依赖，也不会影响现有Firebase服务的初始化。

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