I'm using Firebase services in Flutter web app and having the issue with loading firebase script.
When I'm using flutter run -d chrome I see blank page with error and after reload page is loaded fine :-/.
When I do flutter build web - the page is never loaded, reload doesn't help.
Underlying error:
Uncaught ReferenceError: firebase is not defined
Here's what I see on first launch when I do flutter run -d chrome:
Uncaught ReferenceError: firebase is not defined
at (index):26
app.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
require.js:143 Uncaught Error: Script error for "#firebase/app", needed by: dart_sdk
http://requirejs.org/docs/errors.html#scripterror
at makeError (require.js:168)
at HTMLScriptElement.onScriptError (require.js:1738)
:57663/favicon.ico:1 Failed to load resource: the server responded with a status of 404 (Not Found)
When I do flutter build web - only this error:
Uncaught ReferenceError: firebase is not defined
at Object.aoq (top_level.dart:80)
at Object.auD (cloud_firestore_web.dart:33)
at cloud_firestore_web.dart:26
at aom.a (async_patch.dart:315)
at aom.$2 (async_patch.dart:340)
at Object.G (async_patch.dart:245)
at Object.UR (main.dart:8)
at js_helper.dart:3246
at js_helper.dart:3246
at dartProgram (js_helper.dart:3246)
My index.html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>new_flowers</title>
</head>
<body>
<script src="main.dart.js" type="application/javascript"></script>
<script src="https://www.gstatic.com/firebasejs/7.15.0/firebase-app.js"></script>
<script src ="https://www.gstatic.com/firebasejs/7.15.0/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.15.0/firebase-auth.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "...",
authDomain: "...",
databaseURL: "...",
projectId: "...",
storageBucket: "...",
messagingSenderId: "...",
appId: "...",
measurementId: "..."
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
</body>
</html>
Your index.html is a little bit messed up. Try defining your scripts like this :
Firebase app + used CDNs
Firebase app config
Service worker
Main.dart.js
EDIT: Code won't format correctly, here's the link to html code: `
<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="bevent">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="shortcut icon" type="image/png" href="favicon.png" />
<title>BEvent</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/7.15.1/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/7.15.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.15.1/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.15.2/firebase-storage.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.15.1/firebase-analytics.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
...
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</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>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
navigator.serviceWorker.register('flutter_service_worker.js');
});
}
</script>
<script src="main.dart.js" type="application/javascript"></script>
</body>
</html>`
Related
I'm getting this error when running the project.
It has started after I migrated my project to another Google Account(I had to create all firebase configs(etc) on this account again).
Here is my 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="/web/">
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="Foxy Admin Panel">
<!-- 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="Foxy Admin Panel">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png"/>
<title>Foxy Admin Panel</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.9.1/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.9.1/firebase-analytics.js"></script>
<!-- Firebase Firestore SDK -->
<script src="https://www.gstatic.com/firebasejs/8.4.2/firebase-firestore.js"></script>
<!-- Firebase Messaging SDK -->
<script src="https://www.gstatic.com/firebasejs/8.4.2/firebase-messaging.js"></script>
<!-- Firebase project configuration -->
<script src="https://www.gstatic.com/firebasejs/8.2.4/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.4/firebase-storage.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>
if ('serviceWorker' in navigator) {
window.addEventListener('flutter-first-frame', function () {
navigator.serviceWorker.register('flutter_service_worker.js');
});
}
</script>
<!-- Override the web renderer at runtime: -->
<script type="text/javascript">
// Set your option below
let useHtml = true;
// Check the option value
if(useHtml) {
window.flutterWebRenderer = "html";
} else {
window.flutterWebRenderer = "canvaskit";
}
</script>
<script>
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
// 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: "",
authDomain: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: "",
measurementId: ""
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
</script>
<script src="main.dart.js" type="application/javascript"></script>
</body>
</html>
https://jsfiddle.net/zeq3L78p/
If I just change the configs from firebase to my old account, it works straightaway.
Do you have any idea what is happening?
like many I am struggling with hosting my flutter app with firebase, however, none of the solutions found online helped.
The App runs fine locally in the Browser, but when hosted it shows a blank page. Inside the Dev tools I get the following error:
Uncaught FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been
created - call Firebase App.initializeApp() (app/no-app).
at Object.u [as app] (firebaseNamespaceCore.ts:114)
My index.html
<!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="communitree">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png" />
<title>...</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 src="https://www.gstatic.com/firebasejs/8.6.1/firebase-app.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-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-functions.js"></script>
<script type="module">
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {...};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
// Initialize Firebase
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>
Part of my main.dart
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
runApp(MyApp());
}
Dependencies
firebase_auth: ^3.0.2
cloud_firestore: ^2.1.0
cloud_functions: ^3.0.5
firebase_core: ^1.1.1
Thank you for any help or ideas what might be the issue!
My Flutter web app provides 2 error messages after deploying to firebase. The error messages were not appearing prior deployment. I can not find the root cause.
main.dart.js:39105 Uncaught TypeError: Cannot read property 'isSupported' of undefined
at aaA.a2R (main.dart.js:47197)
at Object.aP_ (main.dart.js:22954)
at main.dart.js:10007
at aGN.a (main.dart.js:5110)
at aGN.$2 (main.dart.js:38004)
at Object.H (main.dart.js:5096)
at aHW (main.dart.js:10032)
at main.dart.js:97159
at main.dart.js:97153
at dartProgram (main.dart.js:97156)
(index):1 Uncaught (in promise) TypeError: Failed to register a ServiceWorker for scope ('https://*****.web.app/') with script ('https://*****.web.app/flutter_service_worker.js'): A bad HTTP response code (404) was received when fetching the script.
The app is functioning when run under web render without any issue.
My guess comes from the firebase JavaScript files does provide error message with stored in Firebase.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="***">
<!-- 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="*/*** Store">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<meta name="google-signin-client_id" content="234259997949-29sp95o3qnl5s9ofdl0ib2eb7mho1avm.apps.googleusercontent.com">
<!-- Favicon -->
<link rel="shortcut icon" type="image/png" href="favicon.png"/>
<title>Eletanco Store</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.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-firestore.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.1/firebase-analytics.js"></script>
<script>
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
var firebaseConfig = {
****
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
<script src="main.dart.js" type="application/javascript"></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>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
navigator.serviceWorker.register('flutter_service_worker.js');
});
}
</script>
<!-- include only the Firebase features as you need -->
<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-database.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-functions.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-remote-config.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.1/firebase-performance.js"></script>
<!--
initialize the SDK after all desired features are loaded, set useEmulator to false
to avoid connecting the SDK to running emulators.
-->
</body>
</html>
I found the solution
I removed the following
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
navigator.serviceWorker.register('flutter_service_worker.js');
});
}
I upgraded all the javascript links and launched again Firebase Initiates.
I'm trying to create a Flutter web app with Firebase integrated to handle authentication. I've gone through the usual process of setting up the firebase app but when I come to run my app on Chrome I get the following message:
The following JSNoSuchMethodError was thrown building Consumer<OurUser>(dirty, dependencies: [_InheritedProviderScope<OurUser>]):
NoSuchMethodError: tried to call a non-function, such as null: 'dart.global.firebase.auth'
Here is my 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.
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="rafflello">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png"/>
<title>rafflello</title>
<link rel="manifest" href="manifest.json">
<!-- 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.2.6/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.6/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.3.1/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.3.1/firebase-storage.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.2.6/firebase-analytics.js"></script>
<script>
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
var firebaseConfig = {
apiKey: apiKey,
authDomain: authDomain,
projectId: projectId,
storageBucket: storageBucket,
messagingSenderId: messagingSenderId,
appId: appId,
measurementId: measurementId
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
</head>
<body>
<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>
And my pubspec.yaml (might be slightly misaligned here but ok in file):
dependencies:
flutter:
sdk: flutter
firebase_auth: ^0.20.0+1
I've tried the firebase configuration inside the head tags and body. What am I missing?
Turns out this part of my index.html file
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/8.2.6/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.6/firebase-app.js"></script>
was in the wrong order. firebase-app.js needs to be before firebase-auth.js.
App is now working
We are trying to build a WebApp in flutter. Our app runs on a simulator without any errors. I've been able to pull the app up on a Chrome browser without any issues. But when I try to sign in (using email and password with firebase) it's giving me this error in the terminal:
NoSuchMethodError: tried to call a non-function, such as null: 'dart.global.firebase.auth'
I've seen a lot of people asking the same thing but none of the answers seem to be fixing the issue.
Here's my 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="makeshift_homeschool_app">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png"/>
<title>makeshift_homeschool_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 -->
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
navigator.serviceWorker.register('flutter_service_worker.js');
});
}
</script>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.21.0/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/7.5.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.21.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.21.0/firebase-storage.js"></script>
<script>
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
var firebaseConfig = {
apiKey: "AIzaSyB8KqDPKUzCjun4TqVanvnyObjE5fGqc4g",
authDomain: "makeshift-homeschool-281816.firebaseapp.com",
databaseURL: "https://makeshift-homeschool-281816.firebaseio.com",
projectId: "makeshift-homeschool-281816",
storageBucket: "makeshift-homeschool-281816.appspot.com",
messagingSenderId: "60367595636",
appId: "1:60367595636:web:84014c2d6a7c4493920921",
measurementId: "G-VBYH88L0VN"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
<script src="main.dart.js" type="application/javascript"></script>
</body>
</html>
I've tried putting the firebase-app.js code in the <head> but it didn't work for me.
Does anyone know how to fix this?