未捕获的 ReferenceError：Flutter 中未定义 firebase
Posted
技术标签:
【中文标题】未捕获的 ReferenceError：Flutter 中未定义 firebase【英文标题】：Uncaught ReferenceError: firebase is not defined in Flutter 【发布时间】：2021-11-02 07:31:48 【问题描述】：我无法在我的 Flutter 项目中初始化 Firebase 我已尝试导入 firebase-app.js 、firebase-auth.js 和 firebase-analytics.js 但我目前没有任何效果使用 Firebase 9.0.1，我厌倦了解决这个错误，它从 1 周开始就没有解决，我已经在 *** 上尝试了所有方法，并搜索了 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
【问题讨论】：
【参考方案1】：我认为您应该将 firebase 版本更改为 8.7.1
【讨论】：
我尝试过使用它，但我当前的firebase-tools 版本是 9.17.0 并且来自 firebase console 的 firebase 配置文件建议添加 9.0.1，所以我也尝试添加它，但所有三个以上所有方法均无效。
firebase.google.com/docs/web/modular-upgrade
Firebase V9 有很多变化。您可以在此处阅读：firebase.google.com/docs/web/modular-upgrade 基本上：V9 有 2 个选项供您选择 => 模块化或兼容。您的代码正在使用模块化。因此，您应该更改“ firebase.initializeApp(firebaseConfig)” => “initializeApp(firebaseConfig)”
非常感谢，但是您能否请您提供正确的格式，例如我应该如何格式化我的 index.html 和 main.dart 文件我给了它尝试，正如您发送的文档中提到的那样，但它仍然给我新的错误【参考方案2】：
问题原因是 Auth 在 main.dart 中的 Myapp 类 中使用，如果我们从那里删除 AuthProvider 小部件并且版本需要从 9 更改为版本，它可以正常工作8.7.1 因为 Flutter 绑定是在此基础上构建的，并且对版本 9 的支持尚未到来。
【讨论】：
以上是关于未捕获的 ReferenceError：Flutter 中未定义 firebase的主要内容，如果未能解决你的问题，请参考以下文章
PhoneGap 错误 - “未捕获的 ReferenceError：cordova 未定义”
未捕获的 ReferenceError：“$ 未定义”[重复]