I have a table that is being populated by firebase database values. When I launch the application, I obtain the following error: Uncaught SyntaxError SyntaxError: The requested module 'https://www.gstatic.com/firebasejs/9.8.3/firebase-app.js' does not provide an export named 'child' at (program)

Can someone provide a solution

HTML and JS code

    <script src="./index.js"></script>
    
    <script type="module">
        // Import the functions you need from the SDKs you need
        var id = 0;
        var tbody = document.getElementById('tbody1');
        function addItem(First_Name, Last_Name, Password, Phone_Number, Email, Account_Status) {
            let trow = document.createElement("tr");
            let td1 = document.createElement('td');
            let td2 = document.createElement('td');
            let td3 = document.createElement('td');
            let td4 = document.createElement('td');
            let td5 = document.createElement('td');
            let td6 = document.createElement('td');

            td1.innerHTML = First_Name;
            td2.innerHTML = Last_Name;
            td3.innerHTML = Password;
            td4.innerHTML = Phone_Number;
            td5.innerHTML = Email;
            td6.innerHTML = Account_Status;

            trow.appendChild(td1);
            trow.appendChild(td2);
            trow.appendChild(td3);
            trow.appendChild(td4);
            trow.appendChild(td5);
            trow.appendChild(td6);

            tbody.appendChild(trow);
        }

        function AddAllItemsToTable(users) {
            tbody.innerHTML = "";
            users.forEach(element => {
                addItem(element.First_Name, element.Last_Name, element.Password, element.Phone_Number, element.Email, element.Account_Status);
            });
        }
     // Import the functions you need from the SDKs you need
  import { initializeApp } from "https://www.gstatic.com/firebasejs/9.8.3/firebase-app.js";
  import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.8.3/firebase-analytics.js";
  // 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: "AIzaSyAZoc5PH-Rs8B8W-ZWWl46ed-KtOlmD6o8",
    authDomain: "quarantine-app-e4ef8.firebaseapp.com",
    databaseURL: "https://quarantine-app-e4ef8-default-rtdb.firebaseio.com",
    projectId: "quarantine-app-e4ef8",
    storageBucket: "quarantine-app-e4ef8.appspot.com",
    messagingSenderId: "27584305781",
    appId: "1:27584305781:web:9d9cb1ab4c61690311763c",
    measurementId: "G-ZRMSNCKHZP"
  };

  // Initialize Firebase
  const app = initializeApp(firebaseConfig);
  const analytics = getAnalytics(app);

        import { getDatabase, ref, child, get } from "https://www.gstatic.com/firebasejs/9.8.3/firebase-app.js";
          // ERROR SEEMS TO BE HERE
        const db = getDatabase()
        function GetAllDataOnce() {
            try {
                const dbref = ref(db);
                get(child(dbref, "users")).then((snapshot) => {
                    var users = [];
                    snapshot.forEach(childSnapshot => {
                        const data = childSnapshot.val();
                        users.push(data);

                    });
                    AddAllItemsToTable(users);
                });

            }
            catch (err) {
                alert(err);

            }


        }
        window.onload = GetAllDataOnce;

    </script>
</body>

</html>

CodePudding user response：

You're trying to import the Realtime Database functions from the wrong SDK.

Change the import to:

import { getDatabase, ref, child, get } from "https://www.gstatic.com/firebasejs/9.8.3/firebase-database.js";

So firebase-database.js instead of firebase-app.js.