Adding Firebase to JavaScript Project-CodePudding

I'm trying to programm a Chat Web-Application with Firebase. I am using HTML as a return method in Javascript. I tried to include my DB Firebase but I'm getting an error, that the DB is not defined. Can someone solve my Problem?

function Chats() {

  const username = prompt("What's your name?");

  document.getElementById("send-message").addEventListener("submit", postChat);

  function postChat(e) {
      e.preventDefault();
      const timestamp = Date.now();
      const chatTxt = document.getElementById("chat-txt");
      const message = chatTxt.value;
      chatTxt.value = "";
      db.ref("messages/"   timestamp).set({
        usr: username,
        msg: message,
      });
    }
  return (
      <div id="chat">

          <ul id = "messages"></ul>

              <form id="send-messages">

                  <input id="chat-txt" type= "text"></input>
                  <button id="chat-btn">Submit</button>
              </form>

              <script src="https://www.gstatic.com/firebasejs/9.8.1/firebase-app.js"></script>
              <script src="https://united-parents-default-rtdb.europe-west1.firebasedatabase.app"></script>

      </div>
  );    
}

CodePudding user response：

declare DB variable at start of your script

var db = firebase.database();

first you have to initialize the firebase

<script src="https://www.gstatic.com/firebasejs/6.6.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.6.1/firebase-storage.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.6.1/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.6.1/firebase-functions.js"></script>
<script>
    var firebaseConfig = {
        apiKey: "api_key",
        authDomain: "authDomain",
        databaseURL: "databaseURL",
        projectId: "projectId",
        storageBucket: "storageBucket",
        messagingSenderId: "messagingSenderId",
        appId: "appId"
    };
    firebase.initializeApp(firebaseConfig);
</script>

you can get this from firebase console as well

CodePudding user response：

First of all, thank you for your fast answer. I declared my DB as you said and my Firebase Config is in a another JS File which I imported, but now I am getting another Error showing:

Compiled with problems:X

ERROR in ./src/pages/Chats.js 11:0-22

export 'default' (imported as 'firebase') was not found in 'firebase/app' (possible exports: FirebaseError, SDK_VERSION, _DEFAULT_ENTRY_NAME, _addComponent, _addOrOverwriteComponent, _apps, _clearComponents, _components, _getProvider, _registerComponent, _removeServiceInstance, deleteApp, getApp, getApps, initializeApp, onLog, registerVersion, setLogLevel)

ERROR in ./src/pages/Chats.js 22:11-28