[英]Flutter Web - No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app)
I understand there are many very similar questions to this;我知道有很多与此非常相似的问题; but none of their solutions work for me.
但他们的解决方案都不适合我。 I've tried them all.
我都试过了。 PS: I expect the problem is something to do with my index.html
PS:我希望问题与我的索引有关。html
Problem: I am using Firebase (on Flutter web) and I am trying to authenticate users through it.问题:我正在使用 Firebase(在 Flutter 网络上),我正在尝试通过它对用户进行身份验证。 However, my site won't even launch (blank screen) after I tried adding Firebase to it to get it to work.
但是,在我尝试将 Firebase 添加到它以使其正常工作后,我的网站甚至无法启动(空白屏幕)。 I'd appreciate some help figuring this out!
我会很感激一些帮助解决这个问题!
The Error: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app)错误:没有 Firebase App '[DEFAULT]' has created - call Firebase App.initializeApp() (app/no-app)
Notes: The problem occurs on Flutter web but works on my Android phone.注意:问题出现在 Flutter web 但在我的 Android 手机上有效。 Also, I have spent hours looking up every answer to all similar questions and none of their solutions work.
此外,我花了几个小时查找所有类似问题的每个答案,但他们的解决方案都不起作用。 Additionally, this is my first time asking a question, so please let me know if I'm doing anything wrong.
另外,这是我第一次提出问题,所以如果我做错了什么,请告诉我。 Thanks!
谢谢!
Output for Error: Output 错误:
To hot restart changes while running, press "r" or "R".
For a more detailed help message, press "h". To quit, press "q".
FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp()
(app/no-app).
at Object.u [as app] (https://www.gstatic.com/firebasejs/8.4.3/firebase-app.js:1:18229)
at Object.app$ [as app]
(http://localhost:60058/packages/firebase_core_web/src/interop/core.dart.lib.js:42:101)
at new cloud_firestore_web.FirebaseFirestoreWeb.new
(http://localhost:60058/packages/cloud_firestore_web/src/write_batch_web.dart.lib.js:865:64)
at Function.registerWith
(http://localhost:60058/packages/cloud_firestore_web/src/write_batch_web.dart.lib.js:788:73)
at Object.registerPlugins
(http://localhost:60058/packages/chat/generated_plugin_registrant.dart.lib.js:30:46)
at main (http://localhost:60058/web_entrypoint.dart.lib.js:44:35)
at main.next (<anonymous>)
at runBody (http://localhost:60058/dart_sdk.js:39051:34)
at Object._async [as async] (http://localhost:60058/dart_sdk.js:39082:7)
at main$ (http://localhost:60058/web_entrypoint.dart.lib.js:43:18)
at http://localhost:60058/main_module.bootstrap.js:19:10
at Array.forEach (<anonymous>)
at window.$dartRunMain (http://localhost:60058/main_module.bootstrap.js:18:32)
at <anonymous>:1:8
at Object.runMain (http://localhost:60058/dwds/src/injected/client.js:8656:21)
at http://localhost:60058/dwds/src/injected/client.js:22068:19
at _wrapJsFunctionForAsync_closure.$protected
(http://localhost:60058/dwds/src/injected/client.js:3830:15)
at _wrapJsFunctionForAsync_closure.call$2 (http://localhost:60058/dwds/src/injected/client.js:10905:12)
at Object._asyncStartSync (http://localhost:60058/dwds/src/injected/client.js:3794:20)
at main__closure1.$call$body$main__closure (http://localhost:60058/dwds/src/injected/client.js:22080:16) at main__closure1.call$1 (http://localhost:60058/dwds/src/injected/client.js:22007:19)
at StaticClosure._rootRunUnary [as call$2$5]
(http://localhost:60058/dwds/src/injected/client.js:4153:16)
at _CustomZone.runUnary$2$2 (http://localhost:60058/dwds/src/injected/client.js:12136:39)
at _CustomZone.runUnaryGuarded$1$2 (http://localhost:60058/dwds/src/injected/client.js:12068:14)
at _ControllerSubscription._sendData$1 (http://localhost:60058/dwds/src/injected/client.js:11697:19)
at _DelayedData.perform$1 (http://localhost:60058/dwds/src/injected/client.js:11849:59)
at _PendingEvents_schedule_closure.call$0 (http://localhost:60058/dwds/src/injected/client.js:11898:14)
at Object._microtaskLoop (http://localhost:60058/dwds/src/injected/client.js:3990:24)
at StaticClosure._startMicrotaskLoop (http://localhost:60058/dwds/src/injected/client.js:3996:11)
at _AsyncRun__initializeScheduleImmediate_internalCallback.call$1
(http://localhost:60058/dwds/src/injected/client.js:10774:9)
at invokeClosure (http://localhost:60058/dwds/src/injected/client.js:1250:26)
at MutationObserver.<anonymous> (http://localhost:60058/dwds/src/injected/client.js:1269:18)
My entire index.html file (some fields I've blurred with "X"s because I'm not sure if they're personal details):我的整个 index.html 文件(我用“X”模糊了一些字段,因为我不确定它们是否是个人详细信息):
<!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="chat">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png"/>
<title>chat</title>
<link rel="manifest" href="manifest.json">
</head>
<body>
<!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
<!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.4.3/firebase-app.js"></script>
<!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
<script src="https://www.gstatic.com/firebasejs/8.4.3/firebase-analytics.js"></script>
<!-- Add Firebase products that you want to use -->
<script src="https://www.gstatic.com/firebasejs/8.4.3/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.4.3/firebase-firestore.js"></script>
<!-- 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>
// TODO: Replace the following with your app's Firebase project configuration
// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
var firebaseConfig = {
// ...
};
const firebaseConfig = {
apiKey: "XX",
authDomain: "X",
projectId: "chat-6052e",
storageBucket: "XXXXX",
messagingSenderId: "XXX",
appId: "XX"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
<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>
My main.dart function (the start of it showing I have initalized Firebase like many of the other answers say is the solution):我的 main.dart function (它的开头显示我已经初始化 Firebase 就像许多其他答案一样,这是解决方案):
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
runApp(MyApp());
}
My pubspec.yaml (some of it showing dependencies):我的 pubspec.yaml (其中一些显示依赖项):
dependencies:
flutter:
sdk: flutter
# The following adds the Cupertino Icons font to your application.
# Use with the CupertinoIcons class for iOS style icons.
cupertino_icons: ^1.0.2
google_fonts: ^2.0.0
firebase_core: ^1.1.0
firebase_auth: ^1.1.2
google_sign_in: ^5.0.2
email_validator: '^1.0.6'
provider: ^5.0.0
cloud_firestore: ^1.0.7
dev_dependencies:
flutter_test:
sdk: flutter
Build gradle (entire thing):构建 gradle(整个东西):
buildscript {
ext.kotlin_version = '1.3.50'
repositories {
google()
jcenter()
}
dependencies {
classpath 'com.google.gms:google-services:4.3.5' // was 4.3.5
classpath 'com.android.tools.build:gradle:4.1.0'
classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
}
}
allprojects {
repositories {
google()
jcenter()
}
}
rootProject.buildDir = '../build'
subprojects {
project.buildDir = "${rootProject.buildDir}/${project.name}"
}
subprojects {
project.evaluationDependsOn(':app')
}
task clean(type: Delete) {
delete rootProject.buildDir
}
App-level build gradle (entire thing):应用程序级构建 gradle(整个事情):
def localProperties = new Properties()
def localPropertiesFile = rootProject.file('local.properties')
if (localPropertiesFile.exists()) {
localPropertiesFile.withReader('UTF-8') { reader ->
localProperties.load(reader)
}
}
def flutterRoot = localProperties.getProperty('flutter.sdk')
if (flutterRoot == null) {
throw new GradleException("Flutter SDK not found. Define location with flutter.sdk in the local.properties file.")
}
def flutterVersionCode = localProperties.getProperty('flutter.versionCode')
if (flutterVersionCode == null) {
flutterVersionCode = '1'
}
def flutterVersionName = localProperties.getProperty('flutter.versionName')
if (flutterVersionName == null) {
flutterVersionName = '1.0'
}
apply plugin: 'com.google.gms.google-services'
apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"
android {
compileSdkVersion 30
sourceSets {
main.java.srcDirs += 'src/main/kotlin'
}
defaultConfig {
// TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
applicationId "com.example.chat"
minSdkVersion 21 // was 16
targetSdkVersion 30
versionCode flutterVersionCode.toInteger()
versionName flutterVersionName
}
buildTypes {
release {
// TODO: Add your own signing config for the release build.
// Signing with the debug keys for now, so `flutter run --release` works.
signingConfig signingConfigs.debug
}
}
}
flutter {
source '../..'
}
dependencies {
implementation platform('com.google.firebase:firebase-bom:27.1.0')
implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
}
Solution解决方案
So after a few more hours of messing around I determined that my index.html file was the problem.因此,经过几个小时的混乱,我确定我的 index.html 文件是问题所在。 Changing it to this fixed the problem (I blanked out some fields with X's that I think could be sensative?):
将其更改为此解决了问题(我用 X 删除了一些我认为可能敏感的字段?):
<!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="chat">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png"/>
<title>chat</title>
<link rel="manifest" href="manifest.json">
</head>
<body>
<!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
<!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.4.3/firebase-app.js"></script>
<!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
<script src="https://www.gstatic.com/firebasejs/8.4.3/firebase-analytics.js"></script>
<!-- Add Firebase products that you want to use -->
<script src="https://www.gstatic.com/firebasejs/8.4.3/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.4.3/firebase-firestore.js"></script>
<!-- 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>
// TODO: Replace the following with your app's Firebase project configuration
// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
var firebaseConfig = {
apiKey: "XXX",
authDomain: "XXX",
projectId: "XXX",
storageBucket: "XXX",
messagingSenderId: "XXX",
appId: "XXX"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
<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>
The particular error message comes from not initialising Firebase.特定的错误消息来自未初始化 Firebase。 Matthew's answer is the correct way.
马修的答案是正确的方法。 There is a gap in the official Firesbase documentation where you are offered the Firebase configuration object with your keys to insert into index.html.
官方 Firesbase 文档中存在一个空白,其中提供了 Firebase 配置 object 以及您的密钥以插入 index.html。 If you copy this alone you will still need to add the following lines immediately under this:
如果你单独复制这个,你仍然需要在下面立即添加以下行:
// Initialize Firebase //初始化Firebase
firebase.initializeApp(firebaseConfig);
You can initialize default app like below;您可以像下面这样初始化默认应用程序;
Future<void> initializeDefault() async {
FirebaseApp app = await Firebase.initializeApp();
assert(app != null);
setState(() {
loading = false;
}
);
print('Initialized default app $app');
}
@override
void initState() {
initializeDefault();
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(statusBarColor: Colors.transparent));
super.initState();
}
Dont use two Firebase.initializeApp() statements in your code.不要在代码中使用两个 Firebase.initializeApp() 语句。
To prevent the this error, 'Local module descriptor class for com.google.android.gms.providerinstaller.dynamite not found'.为防止出现此错误,“未找到 com.google.android.gms.providerinstaller.dynamite 的本地模块描述符 class”。
I ran into the same issue.我遇到了同样的问题。 The exception is prettry clear: the FirebaseApp is not initilized.
异常很明显:FirebaseApp 未初始化。 Most of the answers recommended either initilized the app in main.dart or in index.html, but NONE of them worked for me:
大多数答案建议在 main.dart 或index.html中初始化应用程序,但没有一个对我有用:
// did not work for me, initilizeApp fails for flutter web
Future<void> main() async {
try {
await Firebase.initializeApp(name: fireStoreInstanceName);
} on Exception catch (e) {
print(e);
}
runApp(const MyApp());
}
/// index.html
/// did not work either, FireApp initilized in index.html is not accessible in dart
<script type="module">
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.1.3/firebase-app.js";
const firebaseConfig = {
apiKey: "xxxxx",
authDomain: "xxxxx",
projectId: "noplans",
storageBucket: "xxxx",
messagingSenderId: "xxxx",
appId: "1:xxxxx",
measurementId: "xxxxx"
};
const app = initializeApp(firebaseConfig, "noplans");
console.log("qqqqq 2, app = " + app.name);
</script>
What have worked for me are:对我有用的是:
main.dar
, init the FireApp with options if it is web applicationmain.dar
中,如果是 web 应用程序,则使用选项初始化 FireAppFirebaseFirestore.instanceFor
instead of FirebaseFirestore.instance
:FirebaseFirestore.instanceFor
而不是FirebaseFirestore.instance
手动获取 FirestoreInstance :/// in main.dart
import 'package:flutter/foundation.dart' show kIsWeb;
...
if (kIsWeb) {
await Firebase.initializeApp(
name: fireStoreInstanceName,
options: const FirebaseOptions(
apiKey: "xxxxxxxxxxxx",
appId: "1:xxxxxx",
messagingSenderId: "xxxxxxx",
projectId: "xxxx"),
);
} else {
await Firebase.initializeApp(name: fireStoreInstanceName);
}
/// to get Firestore instance
FirebaseFirestore? getFirestoreInstance() {
for (var app in Firebase.apps) {
if (app.name == fireStoreInstanceName) {
return FirebaseFirestore.instanceFor(app: app);
}
}
return null;
}
/// use of instance
FirebaseFirestore? instance = getFirestoreInstance();
if (instance == null) {
return likes;
}
QuerySnapshot<Map<String, dynamic>> snapshot =
await instance.collection("my_doc").get();
UPDATE Sep 2022 2022 年 9 月更新
I just faced this error I solved it by executing我刚刚遇到这个错误我通过执行解决了它
flutter clean
And call await Firebase.initializeApp()
with options
parameter but without name
parameter并使用
options
参数但没有name
参数调用await Firebase.initializeApp()
After struggling a lot, I did it this way.苦苦挣扎后,我就这样做了。
In main.dart add the below code.在 main.dart 添加以下代码。 Please note here, do not pass the name field into the initializeApp.
请注意这里,不要将name字段传递给 initializeApp。
if(kIsWeb || Platform.isAndroid){
await Firebase.initializeApp(options: const FirebaseOptions(
apiKey: "xxx",
appId: "xxx",
databaseURL: "xxx",
messagingSenderId: "xxx",
projectId: "xxx",
storageBucket: "xxx",
));
}
While, the index.html should look like below.而 index.html 应该如下所示。
<script type="module">
// Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.10.0/firebase-app.js";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
const firebaseConfig = {
apiKey: "xxx",
authDomain: "xxx",
databaseURL: "xxx",
projectId: "xxx",
storageBucket: "xxx",
messagingSenderId: "xxx",
appId: "xxx"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.