How to use imports for firebase and document or window to get info from the html file
Question
When I use imports enabling type:module in the package json file I can use without problems the imports such as import { ref, set,child,getDatabase,onValue,get,push, update} from "firebase/database"; and access the data, but I want to interact with that information with inputs or text areas but I cannot access those it throws document is not defined.!
I have read many pages but as I am new I cannot get it. I cannot apply the answer to my project.
import { ref, set,child ,getDatabase,onValue,get,push, update} from "firebase/database";
import { getAuth, onAuthStateChanged } from "firebase/auth";
//to get info from firebase
var headbox = document.getElementById('a'); // from Html to manage info send and show it here
var bodybox = document.getElementById('b'); // error when I want to read this
Although if I take those imports out and erase type:module in the package json file, I can use document.getById but I cannot use imports please help me! I am new
2 answers
solution1
1 2023-01-21 13:23:16
type: module in package.json is for use in Nodejs environments, hence the error. Backend has no document or even window object.
What you are doing is frontend, so setting up a frontend environment using vite / webpack (preferably vite ), would do you some justice.
vite is really easy to setup for what you are doing. Vite Getting Started Guide .
You just place your index.html at the root of your working folder and run it's commands. It loads very quickly.
solution2
0 2023-01-13 11:45:53
The Firebase Web SDK ideally requires module bundlers (Webpack/Rollup) or JavaScript framework tooling like Vue, React, Angular, etc because the Web SDK (or at least version 9) is optimized to work with module bundlers to eliminate unused code (tree-shaking) and decrease SDK size.
Sounds like you would be better off using CDN (content delivery.network).
JavaScript
import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.15.0/firebase-app.js';
import { ref, set, child, getDatabase, onValue, get, push, update } from 'https://www.gstatic.com/firebasejs/9.15.0/firebase-database.js';
import { getAuth, onAuthStateChanged } from 'https://www.gstatic.com/firebasejs/9.15.0/firebase-auth.js';
const firebaseConfig = {
apiKey: 'xxx',
authDomain: 'xxx',
projectId: 'xxx',
storageBucket: 'xxx',
messagingSenderId: 'xxx',
appId: 'xxx',
measurementId: 'xxx'
};
const firebaseApp = initializeApp(firebaseConfig);
const auth = getAuth();
window.addEventListener('DOMContentLoaded', (event) => {
const headbox = document.getElementById('a');
const bodybox = document.getElementById('b');
onAuthStateChanged(auth, (user) => {
if (user) {
// user.uid
}
});
});
HTML
<html>
<head>
...
</head>
<body>
<div id="a">Head Box</div>
<div id="b">Body Box</div>
<script type="module" src="your-javascript-file.js"></script>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.