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 查询快照错误:“未处理的异常:错误状态:无元素”