Flutter Web运行报No Firebase App '[DEFAULT]'错误 排查7天未解决求方案

核心问题定位 #

你的index.html存在3处逻辑错误直接导致该报错：

1. 脚本加载顺序错误：Flutter入口main.dart.js被放在Firebase初始化代码之前加载，Flutter代码执行时Firebase默认应用还未创建
2. Firebase API调用错误：你引入的是8.x版本的Firebase JS SDK，使用了仅9.x模块化版本支持的initializeApp()直接调用写法，8.x版本必须走firebase.命名空间调用
3. 重复加载main.dart.js：既直接声明了script标签加载，后续service worker逻辑又会二次加载，会引发重复执行逻辑异常

具体修复步骤 #

1. 调整脚本顺序&删除重复加载代码 #

删除你当前代码中多余的<script src="main.dart.js" type="application/javascript"></script>行，将Firebase配置初始化代码块移动到Firebase SDK引用之后、渲染器配置代码之后，确保在加载Flutter代码前先完成Firebase初始化。

2. 修正Firebase初始化语法 #

将原初始化代码：

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);

修改为适配8.x版本的写法：

// Initialize Firebase
firebase.initializeApp(firebaseConfig);
const analytics = firebase.analytics();

3. 修复后index.html body部分参考结构 #

<body>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<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-firestore.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-storage.js"></script>

<script>
  // Your web app's Firebase configuration
  const firebaseConfig = {
    apiKey: "AIzaSyAgoXpOjiZntQBEMqt7ZDrcFpLRmH1ZwCM",
    authDomain: "jaituncshop.firebaseapp.com",
    databaseURL: "https://jaituncshop-default-rtdb.firebaseio.com",
    projectId: "jaituncshop",
    storageBucket: "jaituncshop.appspot.com",
    messagingSenderId: "338592147861",
    appId: "1:338592147861:web:14315ce1d827ad50c1ee9c",
    measurementId: "G-TG69GZ1VSX"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  const analytics = firebase.analytics();
</script>

<script type="text/javascript">
    let useHtml = false // 补充原代码缺失的赋值，避免语法报错
    if(useHtml) {
      window.flutterWebRenderer = "html";
    } else {
      window.flutterWebRenderer = "canvaskit";
    }
  </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>

额外检查点 #

确认Flutter项目pubspec.yaml中依赖的firebase系列包版本和JS SDK 8.6.1版本匹配，建议使用firebase_core: ^1.20.0、firebase_auth: ^3.11.2等同世代版本，避免版本跨度过大导致的兼容问题。

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