Uncaught FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app)

Question

Making a Landing page with Tailwind and Firebase. Using the firebase realtime database to collect the contact and email subscribers but the email subscribers data is not being added!

** errors.ts:101 Uncaught FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app). at f ( https://www.gstatic.com/firebasejs/7.19.0/firebase-app.js:1:16863 ) at Object.n [as database] ( https://www.gstatic.com/firebasejs/7.19.0/firebase-app.js:1:17116 ) at file:///Users/bishalsaha/Desktop/CircleAI/public/Subscribe.js:2:32 **

<!-- Contacts -->
      <section id="Contacts" class="text-shark-100 bg-shark-500 body-font relative">
        <div class="container px-5 pt-24 pb-15 mx-auto">
          <div class="flex flex-col text-center w-full mb-12">
            <h1 class="sm:text-3xl text-2xl font-medium title-font mb-4 text-white">Contact Us</h1>
            <p class="lg:w-2/3 mx-auto leading-relaxed text-base">Have any Feedbacks & Questions, Just Go Ahead!</p>
            <p class="lg:w-2/3 mx-auto leading-relaxed text-base">Also Get Email Updates.</p>
          </div>
          <div class="lg:w-1/2 md:w-2/3 mx-auto">
            <form class="flex flex-wrap -m-2" id="Contact">
              <div class="p-2 w-1/2">
                <input class="w-full bg-shark-400 rounded border border-shark-300 text-white focus:outline-none focus:border-red-500 text-base px-4 py-2" placeholder="First Name" id="FirstName" type="text" required>
              </div>
              <div class="p-2 w-1/2">
                <input class="w-full bg-shark-400 rounded border border-shark-300 text-white focus:outline-none focus:border-red-500 text-base px-4 py-2" placeholder="Last Name" id="LastName" type="text" required>
              </div>
              <div class="p-2 w-full">
                <input class="w-full bg-shark-400 rounded border border-shark-300 text-white focus:outline-none focus:border-red-500 text-base px-4 py-2" placeholder="Company" id="Company" type="Text">
              </div>
              <div class="p-2 w-full">
                <input class="w-full bg-shark-400 rounded border border-shark-300 text-white focus:outline-none focus:border-red-500 text-base px-4 py-2" placeholder="Email" id="Email" type="email" required>
              </div>
              <div class="p-2 w-full">
                <input class="w-full bg-shark-400 rounded border border-shark-300 text-white focus:outline-none focus:border-red-500 text-base px-4 py-2" placeholder="Phone Number" id="PhoneNumber" type="tel">
              </div>
              <div class="p-2 w-full">
                <textarea class="w-full bg-shark-400 rounded border border-shark-300 text-white focus:outline-none h-48 focus:border-red-500 text-base px-4 py-2 resize-none block" placeholder="Message" id="Message" required></textarea>
              </div>
              <div class="p-2 w-full">
                <button class="flex mx-auto text-white bg-red-500 border-0 py-2 px-8 focus:outline-none hover:bg-red-600 hover:shadow-2xl rounded text-lg" type="submit">Let's Talk</button>
              </div>
              <div class="p-2 w-full pt-8 mt-8 border-t border-shark-300">
              </div>
            </form>
          </div>
        </div>
      </section>
      <!-- News -->
      <section id="News" class="text-shark-100 bg-shark-500 body-font">
        <div class="container px-5 pt-15 pb-24 mx-auto">
          <div class="flex flex-col text-center w-full mb-12">
            <h1 class="sm:text-3xl text-2xl font-medium title-font mb-4 text-white">Get Early Access</h1>
            <p class="lg:w-2/3 mx-auto leading-relaxed text-base">Subscribe to our emails & get notified about early updates.</p>
          </div>
          <form id="Subscribe" class="flex lg:w-2/3 w-full sm:flex-row flex-col mx-auto px-8 sm:px-0">
            <input class="flex-grow w-full bg-shark-400 rounded border border-shark-300 text-white focus:outline-none focus:border-red-500 text-base px-4 py-2 mr-4 mb-4 sm:mb-0" placeholder="Full Name" type="text" id="Name" required>
            <input class="flex-grow w-full bg-shark-400 rounded border border-shark-300 text-white focus:outline-none focus:border-red-500 text-base px-4 py-2 mr-4 mb-4 sm:mb-0" placeholder="Email" type="email" id="EmailUpdates" required>
            <button class="text-white bg-red-500 border-0 py-2 px-8 focus:outline-none hover:bg-red-600 hover:shadow-2xl rounded text-lg" type="submit">Subscribe</button>
          </form>
        </div>
      </section>

The javascript for Contact form data collection

// Your web app's Firebase configuration
var firebaseConfig = {
  apiKey: "xxxx",
  authDomain: "xxxx",
  databaseURL: "xxxx",
  projectId: "xxxx",
  storageBucket: "xxxx",
  messagingSenderId: "xxxx",
  appId: "xxxx",
  measurementId: "xxxx"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();

// Reference messages collection
var contactRef = firebase.database().ref('Contact');

// Listen for a submit

document.getElementById('Contact').addEventListener('submit', submitForm);

// Submit form
function submitForm(e){
  e.preventDefault();


  // Get values
  var firstname = getInputVal('FirstName');
  var lastname = getInputVal('LastName');
  var company = getInputVal('Company');
  var email = getInputVal('Email');
  var phone = getInputVal('PhoneNumber');
  var message = getInputVal('Message');

  // Save Contact
  saveMessage(firstname, lastname, company, email, phone, message);

  // Clear form
  document.getElementById('Contact').reset();

}

// Function to get get form values
function getInputVal(id){
  return document.getElementById(id).value;
}

// Save message to firebase
function saveMessage(firstname, lastname, company, email, phone, message){
  var newContactRef = contactRef.push();
  newContactRef.set({
    firstname: firstname,
    lastname: lastname,
    company:company,
    email:email,
    phone:phone,
    message:message
  });
}

The javascript for Email subscriber form data collection

// Reference messages collection
var emailupdatesRef = firebase.database().ref('EmailUpdates');
  
// Listen for a submit
  
document.getElementById('Subscribe').addEventListener('submit', submitForm);
  
// Submit form
function submitForm(e){
  e.preventDefault();

  // Get values
  var name = getInputVal('Name');
  var email = getInputVal('EmailUpdates');
  
  // Save Email Updates
  saveMessage(name, email);

  // Clear form
  document.getElementById('Subscribe').reset();
}

// Function to get form values
function getInputVal(id){
    return document.getElementById(id).value;
  }

// Save message to firebase
function saveMessage(name, email){
    var newEmailUpdatesRef = emailupdatesRef.push();
    newEmailUpdatesRef.set({
      name: name,
      email:email
    });
  }

Answer 1

Try Changing the Firebase App.initializeApp() and Adding Database

Answer 2

You have not initialized the real-time database properly.

It should be like this:

<script src="/__/firebase/7.18.0/firebase-app.js"></script>
<script src="/__/firebase/7.18.0/firebase-analytics.js"></script>
<script src="/__/firebase/7.18.0/firebase-database.js""></script>

<!-- Initialize Firebase -->
<script src="/__/firebase/init.js"></script>