Question 119243 in Firebase Question posted in
An extensive official documentation can be found here.

How to use imports for firebase and document or window to get info from the html file

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

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search