I'm learning firebase, and I'm trying to setup a simple button to launch the auth popup.
However my app seems to be unable to run any code from any external user defined js file.
I've done the needful, having setup using firebase init hosting, and I run the server using firebase emulators:start
I just want it to open src=test.js and run the console log. But no matter what I do, I can't seem to get it to run the console log as long as it's on a separate document. When I put console log back in the index.html file, it works. but when I try to call another document I get nothing.
I've tried using defer with the script, but that does nothing either, as well as putting ./ in front of the file name.
the app seems to be loading the firebase files just fine, as I see some console log outputs to the browser console, but nothing from user defined ones. Any help would be appreciated.
I'm at a complete loss. The file is located in the public folder right next to index.html
I'm trying to run this on localhost:5000
<title>Welcome to Firebase Hosting</title>
<script type="text/javascript" src="test.js"></script>
<!-- update the version number as needed -->
<script defer src="/__/firebase/9.5.0/firebase-app-compat.js"></script>
<!-- include only the Firebase features as you need -->
<script defer src="/__/firebase/9.5.0/firebase-auth-compat.js"></script>
<script defer src="/__/firebase/9.5.0/firebase-database-compat.js"></script>
<script defer src="/__/firebase/9.5.0/firebase-firestore-compat.js"></script>
<script defer src="/__/firebase/9.5.0/firebase-functions-compat.js"></script>
<script defer src="/__/firebase/9.5.0/firebase-messaging-compat.js"></script>
<script defer src="/__/firebase/9.5.0/firebase-storage-compat.js"></script>
<script defer src="/__/firebase/9.5.0/firebase-analytics-compat.js"></script>
<script defer src="/__/firebase/9.5.0/firebase-remote-config-compat.js"></script>
<script defer src="/__/firebase/9.5.0/firebase-performance-compat.js"></script>
<script defer src="/__/firebase/init.js?useEmulator=true"></script>
test.js
console.log("test");
So I was able to get it working with this code. Rather than using the built in initializers, I went thru the firebase documentation and a different tutorial. It seems something in Firebase was preventing the file from being served.
However now I have another issue (i'll make a new question for this), I suspect the items in the first <script> tag are not running as i'm now getting the error:
Uncaught SyntaxError: Cannot use import statement outside a module
which i'm not really sure how to handle. I guess I need to put them in a separate file, as a module and re-import it right?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<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
import{getAuth, createUserWithEmailAndPassword} from 'firebase/auth';
import { getFirestore } from "firebase/firestore";
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "AIzaSyA948R6SrFwe_Q_MA6ea58NxGXNHU_ilV8",
authDomain: "md-data-2d027.firebaseapp.com",
projectId: "md-data-2d027",
storageBucket: "md-data-2d027.appspot.com",
messagingSenderId: "531965376903",
appId: "1:531965376903:web:8400361210fe42f6543b22",
measurementId: "G-2QNMX6B4EY"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
console.log("app:" + app);
</script>
<script src="app.js" defer></script>
</head>
<body>
</body>
</html>
