Question

未捕获的 ReferenceError：Flutter 中未定义 firebase

2021-09-04

2527

firebase flutter dart firebase-authentication flutter-web

我无法在我的 Flutter 项目中 初始化 Firebase ，我尝试过导入 firebase-app.js 、 firebase-auth.js 和 firebase-analytics.js ，但都不起作用，我目前正在使用 Firebase 9.0.1 ，我厌倦了解决这个错误，它已经 1 周没有解决了，我已经尝试了 Stackoverflow 上的所有方法，并搜索了有关 Firebase 和 Flutter 的文档，我附上了下面构建和运行时出现的错误检查的屏幕截图，

此外，我已经在我的 Firebase 控制台中启用了 Firebase 功能，因此是否需要将其导入到我的项目中，到目前为止我没有使用它，但这是强制性的吗？

第一次运行 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 进行编辑：

它抛出了： 无法加载资源：net::ERR_NAME_NOT_RESOLVED

Answer 1

我认为你应该将 firebase 版本更改为 8.7.1

leduck

2021-09-06

Answer 2

问题原因是在 main.dart 中的 Myapp 类 中使用了 Auth ，如果我们从那里删除 AuthProvider 小部件，它就会正常工作，并且版本需要从 9 更改为版本 8.7.1，因为 Flutter 绑定是基于此构建的，并且对版本 9 的支持尚未到来。