Uncaught ReferenceError: firebase is not defined in Flutter

Question

我无法在我的 Flutter 项目中初始化 Firebase 我已经尝试导入 firebase-app.js ,firebase-auth.js 和 firebase-analytics.js 但没有任何效果我目前正在使用 Firebase 9.0.1，我厌倦了解决这个错误，它从 1 周开始就没有解决，我已经尝试了一切在 Whosebug 上搜索了关于 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 版的编辑：

它让我震惊：Failed to load resource: net::ERR_NAME_NOT_RESOLVED

Answer 1

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

Answer 2

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

Uncaught ReferenceError: firebase is not defined in Flutter

Uncaught ReferenceError: firebase is not defined in Flutter

dart

firebase

firebase-authentication

flutter

flutter-web