I am not able to initialize Firebase in my Flutter project I have tried importing the firebase-app.js ,firebase-auth.js and firebase-analytics.js but nothing worked I am currently using Firebase 9.0.1, I am tired of solving this error its not been solved from 1 week and I have tried everything on Stackoverflow and searched the documentation on Firebase and Flutter I have attached screenshot of the error check below which I get when build and run,
Also I have enabled firebase functions in my firebase console so does it needs to be imported to my project as of now I ain't using it but is it mandatory to so?
First time when run flutter run -d chrome the Error Output is,
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:
Edits suggested for using version 8.7.1:
it throws me : Failed to load resource: net::ERR_NAME_NOT_RESOLVED
I think you should change firebase version to 8.7.1
The problem cause was Auth used in Myapp class in main.dart it works fine if we remove the AuthProvider widget from there and also the version needs to be changed from 9 to version 8.7.1 as Flutter bindings are built on that and the support for version 9 is yet to come.
Related
So I went through the whole firebase init process and a public folder was created with an index.html which I deleted and changed the firebase.json to match my index.html inside the flutter web folder. When I open the app it is a blank page but the flutter favicon and when I open dev tools is shows the correct index.html. I read a couple of posts that didn't exactly do the trick
or executed their solutions poorly. Either way due to the first post I tried deploying with
<base href="$FLUTTER_BASE_HREF>
<base href="https://project_name.firebaseapp.com/">
<base href="https://project_name.web.app/">
<base href="/">
no href
and as for the second post, I swapped the to before the service worker script
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBn4vWGi9uYUW6nDLFm_mJ9m6ipkkKpyJg"></script>
Here's my index.html file
<!DOCTYPE html>
<html>
<head>
<!--base href="$FLUTTER_BASE_HREF"-->
<base href="https://project-name.firebaseapp.com/">
<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="app">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png"/>
<title>app</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 -->
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-messaging.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-storage.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-performance.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-functions.js"></script>
<!--<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase.js"></script>-->
<script>
const firebaseConfig = {
apiKey: ":]",
authDomain: "project-name.firebaseapp.com",
projectId: "project-name",
storageBucket: "project-name.appspot.com",
messagingSenderId: ":]",
appId: ":]",
measurementId: ":]"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBn4vWGi9uYUW6nDLFm_mJ9m6ipkkKpyJg"></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>
and firebase.json
{
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
},
"functions": {
"predeploy": [
"npm --prefix \"$RESOURCE_DIR\" run lint",
"npm --prefix \"$RESOURCE_DIR\" run build"
]
},
"hosting": {
"public": "app/web",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}
and my website
LINKS Here:
https://groups.google.com/g/flutter-dev/c/1U9HnWlG4q4
Flutter web app is returning blank page after being deployed to firebase hosting
Any help is appreciated, and thank you for taking the time to do so!
I was trying to set firebase for and I follow all the procedures. But After running the app it went all white and showed this error
‘TypeError: Cannot read property ‘app’ of undefined’ In Flutter Web
I then went on to google to search for solution and did everything the way they asked but I ended up having the null safety error. After that I remove the null safety and this is now the error I am getting
Running with unsound null safety
For more information see https://dart.dev/null-safety/unsound-null-safety
Debug service listening on ws://127.0.0.1:57090/YI8fSoqgm_w=/ws
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.6.1/firebase-app.js:1:18836)
at Object.app$ [as app] (http://localhost:57026/packages/firebase_core_web/src/interop/core.dart.lib.js:31:101)
at new cloud_firestore_web.FirebaseFirestoreWeb.new (http://localhost:57026/packages/cloud_firestore_web/src/write_batch_web.dart.lib.js:934:64)
at Function.registerWith (http://localhost:57026/packages/cloud_firestore_web/src/write_batch_web.dart.lib.js:834:73)
at Object.registerPlugins (http://localhost:57026/packages/tembea/generated_plugin_registrant.dart.lib.js:18:46)
at main (http://localhost:57026/web_entrypoint.dart.lib.js:31:35)
at main.next (<anonymous>)
at runBody (http://localhost:57026/dart_sdk.js:40666:34)
at Object._async [as async] (http://localhost:57026/dart_sdk.js:40697:7)
at main$ (http://localhost:57026/web_entrypoint.dart.lib.js:30:18)
at http://localhost:57026/main_module.bootstrap.js:19:10
at Array.forEach (<anonymous>)
at window.$dartRunMain (http://localhost:57026/main_module.bootstrap.js:18:32)
at <anonymous>:1:8
at Object.runMain (http://localhost:57026/dwds/src/injected/client.js:8452:21)
at http://localhost:57026/dwds/src/injected/client.js:24130:19
at _wrapJsFunctionForAsync_closure.$protected (http://localhost:57026/dwds/src/injected/client.js:4461:15)
at _wrapJsFunctionForAsync_closure.call$2 (http://localhost:57026/dwds/src/injected/client.js:11511:12)
at Object._asyncStartSync (http://localhost:57026/dwds/src/injected/client.js:4425:20)
at main__closure3.$call$body$main__closure (http://localhost:57026/dwds/src/injected/client.js:24142:16)
at main__closure3.call$1 (http://localhost:57026/dwds/src/injected/client.js:24069:19)
at StaticClosure._rootRunUnary (http://localhost:57026/dwds/src/injected/client.js:4823:18)
at _CustomZone.runUnary$2$2 (http://localhost:57026/dwds/src/injected/client.js:12879:39)
at _CustomZone.runUnaryGuarded$1$2 (http://localhost:57026/dwds/src/injected/client.js:12826:14)
at _ForwardingStreamSubscription._sendData$1 (http://localhost:57026/dwds/src/injected/client.js:12416:19)
at _ForwardingStreamSubscription._add$1 (http://localhost:57026/dwds/src/injected/client.js:12362:15)
at _ForwardingStreamSubscription._add$1 (http://localhost:57026/dwds/src/injected/client.js:12695:12)
at _MapStream._handleData$2 (http://localhost:57026/dwds/src/injected/client.js:12756:12)
at _ForwardingStreamSubscription._handleData$1 (http://localhost:57026/dwds/src/injected/client.js:12721:20)
at Object.eval (eval at Closure_forwardCallTo (http://localhost:57026/dwds/src/injected/client.js:1701:14), <anonymous>:3:44)
at StaticClosure._rootRunUnary (http://localhost:57026/dwds/src/injected/client.js:4823:18)
at _CustomZone.runUnary$2$2 (http://localhost:57026/dwds/src/injected/client.js:12879:39)
at _CustomZone.runUnaryGuarded$1$2 (http://localhost:57026/dwds/src/injected/client.js:12826:14)
at _ControllerSubscription._sendData$1 (http://localhost:57026/dwds/src/injected/client.js:12416:19)
at _ControllerSubscription._add$1 (http://localhost:57026/dwds/src/injected/client.js:12362:15)
at _SyncStreamController._sendData$1 (http://localhost:57026/dwds/src/injected/client.js:12201:32)
at _SyncStreamController.add$1 (http://localhost:57026/dwds/src/injected/client.js:12082:15)
at Object.eval (eval at Closure_forwardInterceptedCallTo (http://localhost:57026/dwds/src/injected/client.js:1781:14), <anonymous>:3:45)
at StaticClosure._rootRunUnary (http://localhost:57026/dwds/src/injected/client.js:4823:18)
at _CustomZone.runUnary$2$2 (http://localhost:57026/dwds/src/injected/client.js:12879:39)
at _CustomZone.runUnaryGuarded$1$2 (http://localhost:57026/dwds/src/injected/client.js:12826:14)
at _ControllerSubscription._sendData$1 (http://localhost:57026/dwds/src/injected/client.js:12416:19)
at _ControllerSubscription._add$1 (http://localhost:57026/dwds/src/injected/client.js:12362:15)
at _SyncStreamController._sendData$1 (http://localhost:57026/dwds/src/injected/client.js:12201:32)
at _SyncStreamController.add$1 (http://localhost:57026/dwds/src/injected/client.js:12082:15)
at _GuaranteeSink.add$1 (http://localhost:57026/dwds/src/injected/client.js:23581:25)
at HtmlWebSocketChannel_closure1.call$1 (http://localhost:57026/dwds/src/injected/client.js:23874:60)
at _EventStreamSubscription_closure.call$1 (http://localhost:57026/dwds/src/injected/client.js:18042:26)
at StaticClosure._rootRunUnary (http://localhost:57026/dwds/src/injected/client.js:4829:16)
at _CustomZone.runUnary$2$2 (http://localhost:57026/dwds/src/injected/client.js:12879:39)
at _CustomZone.runUnaryGuarded$1$2 (http://localhost:57026/dwds/src/injected/client.js:12826:14)
at _CustomZone_bindUnaryCallbackGuarded_closure.call$1 (http://localhost:57026/dwds/src/injected/client.js:13016:25)
at invokeClosure (http://localhost:57026/dwds/src/injected/client.js:1524:26)
at WebSocket.<anonymous> (http://localhost:57026/dwds/src/injected/client.js:1543:18)
Below is my main function
void main() async{
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
runApp(const MyApp());
And the pubspec
environment:
sdk: ">=2.12.0 <3.0.0"
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.2
flutter_signin_button: ^2.0.0
firebase_auth: ^3.1.4
firebase_core: ^1.8.0
cloud_firestore: ^2.5.4
provider: ^6.0.1
firebase_analytics: ^7.0.1
Finally the 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.
For more details:
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
This is a placeholder for base href that will be replaced by the value of
the `--base-href` argument provided to `flutter build`.
-->
<base href="$FLUTTER_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="tembea">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<title>tembea</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>
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>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-firestore.js"></script>
<script type="module">
// Import the functions you need from the SDKs you need
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.2.0/firebase-app.js";
import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.2.0/firebase-analytics.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
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "AIzaSyAQYkB8TMTJKMmdzmjVQwsyiQrfMaXqOao",
authDomain: "tembea-4d3c6.firebaseapp.com",
projectId: "tembea-4d3c6",
storageBucket: "tembea-4d3c6.appspot.com",
messagingSenderId: "909705170922",
appId: "1:909705170922:web:d034fefe33c9d0d2026c93",
measurementId: "G-11NNW6J10N"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
</script>
</body>
</html>
I do not know what I may have done wrong. Any help would be welcomed.
You have two seperate imports for Firebase, which may cause issues. Remove your <script type="module">... import...</script> and replace it with the different style of initialization like this:
<script>
const firebaseConfig = {
apiKey: "AIzaSyAQYkB8TMTJKMmdzmjVQwsyiQrfMaXqOao",
authDomain: "tembea-4d3c6.firebaseapp.com",
projectId: "tembea-4d3c6",
storageBucket: "tembea-4d3c6.appspot.com",
messagingSenderId: "909705170922",
appId: "1:909705170922:web:d034fefe33c9d0d2026c93",
measurementId: "G-11NNW6J10N"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
This is currently recommended way that can be found in Flutter Firebase docs.
Since you are initializing Firebase in the main function you may also want to move your app startup script below the script of Firebase initialization.
I am getting this error in chrome console when I deploy my Flutter app to Firebase,
(index):7272 crbug/1173575, non-JS module files deprecated.
it first loaded the old version of the app but now its throwing me this error and took too long to respond message on chrome page. I tried deleting that firebase channel and created new one but still nothing changes.
Also when I first open my site in chrome incognito mode it worked for the first time but now its also not working...
I also tried deleting my launch.json file in vscode thinking that this might the problem cause but still nothing changes.
this web app is also not working in IOS 12.5.4 so what's causing this problem I ain't able to figure out please help, but my main concern is in windows chrome this is my web app
Below is my index.html file and I hide my firebase apikeys so ignore that
<!DOCTYPE html>
<html>
<head>
<!-- <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="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/8.6.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-firestore.js"></script>
<script type="module">
var firebaseConfig = {
apiKey: "",
authDomain: "devcom-ecc99.firebaseapp.com",
databaseURL: "https://devcom.firebaseio.com",
projectId: "devcom-ecc99",
storageBucket: "devcom-ecc99.appspot.com",
messagingSenderId: "......",
measurementId: ".......",
appId: "1:.........:web:........",
};
firebase.initializeApp(firebaseConfig);
// const app = initializeApp({ firebaseConfig });
// const app = getAnalytics({ firebaseConfig })
</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>
Any help is appreciated...
thank you,
There was one script tag missing in my index.html file so first always check your html file for these kind of errors but I also did these below steps. so make sure you do this if there are no errors in your html file.
Deleting the widget_test.dart file did worked for me and
I also deleted auto generated launch.json which was created again after deletion.
I was using flutter_webrtc with flutter which uses stun and turn servers so I first removed that plugin and all code related to that and reinstalled them later on so I guess improper installation of plugins and wrong html script tags causes this error... I then run flutter clean and flutter create . and now It's working fine. and when I run usual firebase deploy command it worked out.
I'm trying to run my mobile flutter app on web, i think i did all of the config i needed to do but i get the error: "FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app)." Does anyone know what should i do to fix it? I am initializing the firebase in main, i couldn't find what else i can do.
Here is my main.dart:
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:untitled1/quiz_app/sign_in.dart';
void main() async{
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
runApp(MaterialApp(
//initialRoute: '/SignIn',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.indigo
),
routes: {
'/SignIn' :(context) => SignInPage(),
},
home: Scaffold(
resizeToAvoidBottomInset: false,
body: SignInPage()
),
));
}
And here is 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.
For more details:
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
This is a placeholder for base href that will be replaced by the value of
the `--base-href` argument provided to `flutter build`.
-->
<base href="$FLUTTER_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="ahmett">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<title>ahmett</title>
<link rel="manifest" href="manifest.json">
</head>
<body>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-storage.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-firestore.js"></script
<script>
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
var firebaseConfig = {
apiKey: "cencored",
authDomain: "cencored",
projectId: "cencored",
storageBucket: "cencored",
messagingSenderId: "cencored",
appId: "cencored",
measurementId: "cencored"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
</script><script src="main.dart.js" type="application/javascript"></script>
</body>
</html>
For Flutter web, There is a new setup for Firebase Plugins.
First of All, follow all the steps mentioned here https://firebase.flutter.dev/docs/installation/web
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>example</title>
</head>
<body>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-messaging.js"></script>
<script>
// Your web app's Firebase configuration
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>
<script src="main.dart.js" type="application/javascript"></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 () {
//register firebase-messaging service worker
navigator.serviceWorker.register("/firebase-messaging-sw.js");
// 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>
View this setup at
https://github.com/FirebaseExtended/flutterfire/tree/master/packages/firebase_messaging/firebase_messaging/example/web
I am making an app and drop it in the web. But when I launch it, in chrome there is a blank screen. There is my log from console in chrome:
Installed new service worker.
zone.dart:1339 Uncaught ReferenceError: firebase is not defined
at Object.ad5 (core.dart:54)
at Object.ajF (cloud_firestore_web.dart:36)
at cloud_firestore_web.dart:29
at ad0.a (async_patch.dart:316)
at ad0.$2 (async_patch.dart:341)
at Object.U (async_patch.dart:246)
at adP (main.dart:10)
at js_helper.dart:2684
at js_helper.dart:2684
at dartProgram (js_helper.dart:2684)
Here is my main.dart file:
import 'package:brew_crew/screens/wrapper.dart';
import 'package:brew_crew/services/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(
value: AuthService().user,
child: MaterialApp(
home: Wrapper(),
),
);
}
}
Also there is an index.html file
<!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.
For 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">
<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>
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>
Also if you need you can go to git repository to another files.
https://github.com/rostikro/The-app
I'm using the Flutter 2.0.2.
I looked at your Github repo link, your index.html is missing implementations for Firebase JS entries.
Your pubspec.yaml file includes these dependancies:
firebase_core: ^0.7.0
firebase_auth: ^0.20.1
cloud_firestore: ^0.16.0+1
But you aren't telling your index.html to import them. The following imports will work for versions ^1.0.1 of firebase_auth and cloud_firestore
<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>
Please follow along with the documentation, they put up a very nice and thorough explanation for everything regarding Firebase & Flutter specifically here. You also mentioned that you are using version 2.0.2 of Flutter, so please pay attention to null-safety.