Flutter Web App, Firebase.auth not working. Tried to call a non-function, such as null. 'dart.global.firebase.auth'
Turns out I placed this
<!-- Firebase Configuration-->
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.15.5/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.5/firebase-auth.js"></script>
<!-- <script src="https://www.gstatic.com/firebasejs/7.15.5/firebase-analytics.js"></script> -->
<script src="https://www.gstatic.com/firebasejs/7.15.5/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.15.5/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.15.5/firebase-storage.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.15.5/firebase-database.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
//my info
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
// firebase.analytics();
</script>
<!-- End of Firebase Configuration-->
In the wrong place.
It should be inside the <head>
tag.
Side note, I had this <script src="https://www.gstatic.com/firebasejs/7.15.5/firebase-app.js"></script>
twice, so I deleted the one below.
Finally, thanks to David Iglesias for his answer here: https://github.com/FirebaseExtended/flutterfire/issues/2860#issuecomment-651313186.
Andres Silva
Updated on December 22, 2022Comments
-
Andres Silva over 1 year
I am trying to implement a simple Flutter Web App, with Firebase Auth.
I am getting the error
NoSuchMethodError: tried to call a non-function, such as null: 'dart.global.firebase.auth'
.I have looked at other posts, such as "NoSuchMethodError: tried to call a non-function, such as null: 'dart.global.firebase.auth'" when initializing auth() in flutter for web and Flutter web: tried to call a non-function, such as null: 'dart.global.firebase.storage.
Both suggest the same solution: add firebase-auth.js to
index.html
. I already did it. This is how myindex.html
file looks like:<!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="my_app"> <link rel="apple-touch-icon" href="icons/Icon-192.png"> <!-- Favicon --> <link rel="shortcut icon" type="image/png" href="favicon.png"/> <title>my_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 --> <!-- Firebase Configuration--> <!-- The core Firebase JS SDK is always required and must be listed first --> <script src="https://www.gstatic.com/firebasejs/7.15.5/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.5/firebase-auth.js"></script> <!-- <script src="https://www.gstatic.com/firebasejs/7.15.5/firebase-analytics.js"></script> --> <script src="https://www.gstatic.com/firebasejs/7.15.5/firebase-app.js"></script> <script src="https://www.gstatic.com/firebasejs/7.15.5/firebase-firestore.js"></script> <script src="https://www.gstatic.com/firebasejs/7.15.5/firebase-storage.js"></script> <script src="https://www.gstatic.com/firebasejs/7.15.5/firebase-database.js"></script> <script> // Your web app's Firebase configuration var firebaseConfig = { //my info }; // Initialize Firebase firebase.initializeApp(firebaseConfig); // firebase.analytics(); </script> <!-- End of Firebase Configuration--> <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>
Thanks for your help!