Flutter Web Firebase 错误。未捕获的 ReferenceError：未定义 firebase

Posted

技术标签:

【中文标题】Flutter Web Firebase 错误。未捕获的 ReferenceError：未定义 firebase【英文标题】：Flutter Web Firebase error. Uncaught ReferenceError: firebase is not defined 【发布时间】：2021-06-17 04:29:10 【问题描述】：

我正在开发一个颤振项目，并在这个 Firebase 中使用。这一切都在android上运行，但在web中它会出错，并且在windows中会崩溃。我不知道为什么，但是当我创建一个新项目时，在所有平台上都可以正常工作。 这是我的 main.dart 文件：

import 'package:brew_crew/screens/wrapper.dart';
import 'package:brew_crew/services/auth.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:provider/provider.dart';
import 'package:brew_crew/models/user.dart';

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


class MyApp extends StatelessWidget 
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) 
    return StreamProvider<UserClass>.value(
      initialData: null,
      value: AuthService().user,
      child: MaterialApp(
        home: Wrapper(),
      ),
    );

这是我的 index.html 文件：

    <!DOCTYPE html>
<html>
<head>
  <!--
    If you are serving your web app in a path other than the root, change the
    href value below to reflect the base path you are serving from.

    The path provided below has to start and end with a slash "/" in order for
    it to work correctly.

    Fore more details:
    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
  -->
  <base href="/">

  <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="brew_crew">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">

  <!-- Favicon -->
  <link rel="icon" type="image/png" href="favicon.png"/>

  <title>brew_crew</title>
  <link rel="manifest" href="manifest.json">
</head>
<body>
  <!-- This script installs service_worker.js to provide PWA functionality to
       application. For more information, see:
       https://developers.google.com/web/fundamentals/primers/service-workers -->
  <script>
    if ('serviceWorker' in navigator) 
      window.addEventListener('flutter-first-frame', function () 
        navigator.serviceWorker.register('flutter_service_worker.js');
      );
    
  </script>
  <script src="main.dart.js" type="application/javascript"></script>
</body>
</html>

此外，当我为这个麻烦创建另一个问题时，人们说我添加了这一行（firebase 实现）：

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

但这仍然不起作用，并出现另一个错误。

这是 FLUTTER 控制台日志，当我在 web 中以调试模式启动应用程序时，没有在 index.html 中实现 firebase：

 Failed to establish connection with the application instance in Chrome.
This can happen if the websocket connection used by the web tooling is unable to correctly establish a connection, for example due to a firewall.

这是 CHROME 控制台日志，当我在调试模式下在 web 中启动应用程序时，没有在 index.html 中实现 firebase：

    Failed to load resource: net::ERR_CONNECTION_RESET
DevTools failed to load SourceMap: Could not load content for http://localhost:57634/web_entrypoint.dart.lib.js.map: Connection error: net::ERR_CONNECTION_REFUSED

还有大约 100 条关于加载失败的错误消息。

好的，这次我在 index.html 文件中实现 firebase，从 FLUTTER 控制台得到这个错误：

FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).
at Object.f [as app] (https://www.gstatic.com/firebasejs/7.20.0/firebase-app.js:1:17054)
at Object.app$ [as app] (http://localhost:58780/packages/firebase_core_web/src/interop/core.dart.lib.js:42:101)
at new cloud_firestore_web.FirebaseFirestoreWeb.new (http://localhost:58780/packages/cloud_firestore_web/src/write_batch_web.dart.lib.js:988:64)
at Function.registerWith (http://localhost:58780/packages/cloud_firestore_web/src/write_batch_web.dart.lib.js:842:73)
at Object.registerPlugins (http://localhost:58780/packages/brew_crew/generated_plugin_registrant.dart.lib.js:29:46)
at main (http://localhost:58780/web_entrypoint.dart.lib.js:44:35)
at main.next (<anonymous>)
at runBody (http://localhost:58780/dart_sdk.js:39052:34)
at Object._async [as async] (http://localhost:58780/dart_sdk.js:39083:7)
at main$ (http://localhost:58780/web_entrypoint.dart.lib.js:43:18)
at http://localhost:58780/main_module.bootstrap.js:19:10
at Array.forEach (<anonymous>)
at window.$dartRunMain (http://localhost:58780/main_module.bootstrap.js:18:32)
at <anonymous>:1:8
at Object.runMain (http://localhost:58780/dwds/src/injected/client.js:8656:21)
at http://localhost:58780/dwds/src/injected/client.js:22068:19
at _wrapJsFunctionForAsync_closure.$protected (http://localhost:58780/dwds/src/injected/client.js:3830:15)
at _wrapJsFunctionForAsync_closure.call$2 (http://localhost:58780/dwds/src/injected/client.js:10905:12)
at Object._asyncStartSync (http://localhost:58780/dwds/src/injected/client.js:3794:20)
at main__closure1.$call$body$main__closure (http://localhost:58780/dwds/src/injected/client.js:22080:16)
at main__closure1.call$1 (http://localhost:58780/dwds/src/injected/client.js:22007:19)
at StaticClosure._rootRunUnary [as call$2$5] (http://localhost:58780/dwds/src/injected/client.js:4153:16)
at _CustomZone.runUnary$2$2 (http://localhost:58780/dwds/src/injected/client.js:12136:39)
at _CustomZone.runUnaryGuarded$1$2 (http://localhost:58780/dwds/src/injected/client.js:12068:14)
at _ControllerSubscription._sendData$1 (http://localhost:58780/dwds/src/injected/client.js:11697:19)
at _DelayedData.perform$1 (http://localhost:58780/dwds/src/injected/client.js:11849:59)
at _PendingEvents_schedule_closure.call$0 (http://localhost:58780/dwds/src/injected/client.js:11898:14)
at Object._microtaskLoop (http://localhost:58780/dwds/src/injected/client.js:3990:24)
at StaticClosure._startMicrotaskLoop (http://localhost:58780/dwds/src/injected/client.js:3996:11)
at _AsyncRun__initializeScheduleImmediate_internalCallback.call$1 (http://localhost:58780/dwds/src/injected/client.js:10774:9)
at invokeClosure (http://localhost:58780/dwds/src/injected/client.js:1250:26)
at MutationObserver.<anonymous> (http://localhost:58780/dwds/src/injected/client.js:1269:18)

并形成 CHROME 控制台：

    index.ts:48 TypeError: Cannot read property 'INTERNAL' of undefined
    at config.ts:73
    at index.ts:48
    at firebase-firestore.js:1
    at firebase-firestore.js:1
(anonymous) @ index.ts:48
index.ts:48 Uncaught Error: Cannot instantiate firebase-firestore.js - be sure to load firebase-app.js first.
    at index.ts:48
    at firebase-firestore.js:1
    at firebase-firestore.js:1
VM358:1 This app is linked to the debug service: ws://127.0.0.1:58843/h7wsXIzlbNI=/ws
errors.ts:101 Uncaught (in promise) FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).
    at Object.f [as app] (https://www.gstatic.com/firebasejs/7.20.0/firebase-app.js:1:17054)
    at Object.app$ [as app] (http://localhost:58780/packages/firebase_core_web/src/interop/core.dart.lib.js:42:101)
    at new cloud_firestore_web.FirebaseFirestoreWeb.new (http://localhost:58780/packages/cloud_firestore_web/src/write_batch_web.dart.lib.js:988:64)
    at Function.registerWith (http://localhost:58780/packages/cloud_firestore_web/src/write_batch_web.dart.lib.js:842:73)
    at Object.registerPlugins (http://localhost:58780/packages/brew_crew/generated_plugin_registrant.dart.lib.js:29:46)
    at main (http://localhost:58780/web_entrypoint.dart.lib.js:44:35)
    at main.next (<anonymous>)
    at runBody (http://localhost:58780/dart_sdk.js:39052:34)
    at Object._async [as async] (http://localhost:58780/dart_sdk.js:39083:7)
    at main$ (http://localhost:58780/web_entrypoint.dart.lib.js:43:18)
    at http://localhost:58780/main_module.bootstrap.js:19:10
    at Array.forEach (<anonymous>)
    at window.$dartRunMain (http://localhost:58780/main_module.bootstrap.js:18:32)
    at <anonymous>:1:8
    at Object.runMain (http://localhost:58780/dwds/src/injected/client.js:8656:21)
    at http://localhost:58780/dwds/src/injected/client.js:22068:19
    at _wrapJsFunctionForAsync_closure.$protected (http://localhost:58780/dwds/src/injected/client.js:3830:15)
    at _wrapJsFunctionForAsync_closure.call$2 (http://localhost:58780/dwds/src/injected/client.js:10905:12)
    at Object._asyncStartSync (http://localhost:58780/dwds/src/injected/client.js:3794:20)
    at main__closure1.$call$body$main__closure (http://localhost:58780/dwds/src/injected/client.js:22080:16)
    at main__closure1.call$1 (http://localhost:58780/dwds/src/injected/client.js:22007:19)
    at StaticClosure._rootRunUnary [as call$2$5] (http://localhost:58780/dwds/src/injected/client.js:4153:16)
    at _CustomZone.runUnary$2$2 (http://localhost:58780/dwds/src/injected/client.js:12136:39)
    at _CustomZone.runUnaryGuarded$1$2 (http://localhost:58780/dwds/src/injected/client.js:12068:14)
    at _ControllerSubscription._sendData$1 (http://localhost:58780/dwds/src/injected/client.js:11697:19)
    at _DelayedData.perform$1 (http://localhost:58780/dwds/src/injected/client.js:11849:59)
    at _PendingEvents_schedule_closure.call$0 (http://localhost:58780/dwds/src/injected/client.js:11898:14)
    at Object._microtaskLoop (http://localhost:58780/dwds/src/injected/client.js:3990:24)
    at StaticClosure._startMicrotaskLoop (http://localhost:58780/dwds/src/injected/client.js:3996:11)
    at _AsyncRun__initializeScheduleImmediate_internalCallback.call$1 (http://localhost:58780/dwds/src/injected/client.js:10774:9)
    at invokeClosure (http://localhost:58780/dwds/src/injected/client.js:1250:26)
    at MutationObserver.<anonymous> (http://localhost:58780/dwds/src/injected/client.js:1269:18)
f @ errors.ts:101
m.create @ errors.ts:128
f @ firebaseNamespaceCore.ts:114
app$ @ core.dart:56
cloud_firestore_web.FirebaseFirestoreWeb.new @ cloud_firestore_web.dart:36
registerWith @ cloud_firestore_web.dart:29
registerPlugins @ generated_plugin_registrant.dart:15
main @ web_entrypoint.dart:14
runBody @ async_patch.dart:84
_async @ async_patch.dart:123
main$ @ web_entrypoint.dart:13
(anonymous) @ main_module.bootstrap.js:19
window.$dartRunMain @ main_module.bootstrap.js:18
(anonymous) @ VM359:1
runMain @ client.js:8656
(anonymous) @ client.js:22068
(anonymous) @ client.js:3830
call$2 @ client.js:10905
_asyncStartSync @ client.js:3794
$call$body$main__closure @ client.js:22080
call$1 @ client.js:22007
_rootRunUnary @ client.js:4153
runUnary$2$2 @ client.js:12136
runUnaryGuarded$1$2 @ client.js:12068
_sendData$1 @ client.js:11697
perform$1 @ client.js:11849
call$0 @ client.js:11898
_microtaskLoop @ client.js:3990
_startMicrotaskLoop @ client.js:3996
call$1 @ client.js:10774
invokeClosure @ client.js:1250
(anonymous) @ client.js:1269
Promise.then (async)
_scheduleImmediateWithPromise @ async_patch.dart:164
_scheduleImmediate @ async_patch.dart:136
_scheduleAsyncCallback @ schedule_microtask.dart:69
_rootScheduleMicrotask @ zone.dart:1421
scheduleMicrotask @ zone.dart:1632
[_asyncCompleteError] @ future_impl.dart:602
_asyncCompleteWithErrorCallback @ future.dart:988
runBody @ async_patch.dart:117
_async @ async_patch.dart:123
main$ @ web_entrypoint.dart:13
(anonymous) @ main_module.bootstrap.js:19
window.$dartRunMain @ main_module.bootstrap.js:18
(anonymous) @ VM359:1
runMain @ client.js:8656
(anonymous) @ client.js:22068
(anonymous) @ client.js:3830
call$2 @ client.js:10905
_asyncStartSync @ client.js:3794
$call$body$main__closure @ client.js:22080
call$1 @ client.js:22007
_rootRunUnary @ client.js:4153
runUnary$2$2 @ client.js:12136
runUnaryGuarded$1$2 @ client.js:12068
_sendData$1 @ client.js:11697
perform$1 @ client.js:11849
call$0 @ client.js:11898
_microtaskLoop @ client.js:3990
_startMicrotaskLoop @ client.js:3996
call$1 @ client.js:10774
invokeClosure @ client.js:1250
(anonymous) @ client.js:1269
childList (async)
call$1 @ client.js:10784
_scheduleAsyncCallback @ client.js:4010
_rootScheduleMicrotask @ client.js:4200
scheduleMicrotask @ client.js:4039
schedule$1 @ client.js:11880
_addPending$1 @ client.js:11688
_sendData$1 @ client.js:11520
add$1 @ client.js:11420
_onIncomingMessage$1 @ client.js:21665
eval @ VM347:3
invokeClosure @ client.js:1250
(anonymous) @ client.js:1269
Show 2 more frames

现在是发布模式。

这是我未在 index.html 文件中实现 firebase 时来自 CHROME 的日志：

Uncaught ReferenceError: firebase is not defined
at Object.ajM (cloud_firestore_web.dart:34)
at cloud_firestore_web.dart:29
at adb.a (async_patch.dart:316)
at adb.$2 (async_patch.dart:341)
at Object.T (async_patch.dart:246)
at adZ (main.dart:10)
at js_helper.dart:2684
at js_helper.dart:2684
at dartProgram (js_helper.dart:2684)
at js_helper.dart:2684

当我实施火力基地时：

    index.ts:48 TypeError: Cannot read property 'INTERNAL' of undefined
    at config.ts:73
    at index.ts:48
    at firebase-firestore.js:1
    at firebase-firestore.js:1
(anonymous) @ index.ts:48
index.ts:48 Uncaught Error: Cannot instantiate firebase-firestore.js - be sure to load firebase-app.js first.
    at index.ts:48
    at firebase-firestore.js:1
    at firebase-firestore.js:1
zone.dart:1339 Uncaught FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).
    at Object.f [as app] (https://www.gstatic.com/firebasejs/7.20.0/firebase-app.js:1:17054)
    at Object.adg (http://localhost:59243/main.dart.js:16937:63)
    at Object.ajM (http://localhost:59243/main.dart.js:14995:44)
    at http://localhost:59243/main.dart.js:8929:5
    at adb.a (http://localhost:59243/main.dart.js:5485:71)
    at adb.$2 (http://localhost:59243/main.dart.js:32066:23)
    at Object.T (http://localhost:59243/main.dart.js:5471:19)
    at adZ (http://localhost:59243/main.dart.js:8947:10)
    at http://localhost:59243/main.dart.js:70933:6
    at http://localhost:59243/main.dart.js:70927:55

我也在使用具有 null 安全性的颤振 2.0.2 和飞镖 2.12.1。

另外，如果您需要 pubspec.yaml 或其他文件，您可以访问我的仓库： https://github.com/rostikro/brew_crew 如果您愿意，您能帮我解决 Windows 应用程序崩溃的问题吗？ 这是日志：

    [ERROR:flutter/lib/ui/ui_dart_state.cc(186)] Unhandled Exception: MissingPluginException(No implementation found for method Firebase#initializeCore on channel plugins.flutter.io/firebase_core)
#0      MethodChannel._invokeMethod (package:flutter/src/services/platform_channel.dart:156:7)
<asynchronous suspension>
#1      MethodChannel.invokeListMethod (package:flutter/src/services/platform_channel.dart:344:35)
<asynchronous suspension>
#2      MethodChannelFirebase._initializeCore (package:firebase_core_platform_interface/src/method_channel/method_channel_firebase.dart:30:23)
<asynchronous suspension>
#3      MethodChannelFirebase.initializeApp (package:firebase_core_platform_interface/src/method_channel/method_channel_firebase.dart:77:7)   
<asynchronous suspension>
#4      Firebase.initializeApp (package:firebase_core/src/firebase.dart:41:31)
<asynchronous suspension>
#5      main (package:brew_crew/main.dart:11:3)
<asynchronous suspension>

【问题讨论】：

【参考方案1】：

除了将脚本添加到index.html，您还需要添加一个 Firebase 应用配置：


    <script>
      var firebaseConfig = 
        apiKey: "...",
        authDomain: "[YOUR_PROJECT].firebaseapp.com",
        databaseURL: "https://[YOUR_PROJECT].firebaseio.com",
        projectId: "[YOUR_PROJECT]",
        storageBucket: "[YOUR_PROJECT].appspot.com",
        messagingSenderId: "...",
        appId: "1:...:web:...",
        measurementId: "G-...",
      ;

      // Initialize Firebase
      firebase.initializeApp(firebaseConfig);
    </script>

您可以通过从 Firebase 控制台创建网络应用来获得正确的配置。

更多详情见： https://firebase.flutter.dev/docs/installation/web/

【讨论】：

以上是关于Flutter Web Firebase 错误。未捕获的 ReferenceError：未定义 firebase的主要内容，如果未能解决你的问题，请参考以下文章

在android studio中将firebase添加到flutter时出错：插件项目：firebase_core_web未找到。请更新 settings.gradle [重复]

Flutter Web和Firebase身份验证TypeError：无法读取未定义的属性'app'

Firebase 托管 Flutter Web 应用程序未清除首次部署的缓存

firebase 项目所有者更改后未反映在 Flutter Web 部署上的更改

将firebase添加到flutter web时出现问题，TypeError：无法读取未定义的属性（读取“应用程序”）

Flutter firebase 查询快照错误：“未处理的异常：错误状态：无元素”