Error: The function _firebase.db.collection is not defined and cannot be executed

I am a beginner in react-native and JS. Currently, I am working on a chat app project and attempting to implement a button that triggers the creation of a new chat using the provided function:

const createChat = async () =>{
    await db
    .collection("chats")
    .add({
        chatName: input,
    })
    .then(() => {
        navigation.goBack();
    })
    .catch((error) => alert(error));

}

This is my firebase.js file:


import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
import 'firebase/compat/database';


const firebaseConfig = {
    apiKey: "*",
    authDomain: "*",
    projectId: "*",
    storageBucket: "*",
    messagingSenderId: "*",
    appId: "*",
    measurementId: "*"
  };

  let app;

  if (firebase.apps.length === 0){
      app = firebase.initializeApp(firebaseConfig);
  } else {
        app = firebase.app();
  }

  const db = firebase.app();
  const auth = firebase.auth();

  export {db , auth};

Answer №1

let database = firebase.app(); // creating a FirebaseApp object

Instead of the above code, use:

const db = firebase.firestore(); // to get an instance of Firestore

It is recommended to switch to the new Modular SDK for better compatibility and future adaptations.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for changing the visibility of a div within table rows upon clicking

Struggling to solve this jQuery issue with a table that displays numbers on each row. I want to be able to click on one of the numbers, which is a href link, and toggle only the corresponding div called "test" instead of toggling all rows at once. How can ...

There is a hidden delete button obscured by another element. What steps can be taken to bring that element to the forefront and make it visible?

I'm having trouble positioning a delete button in the top right corner of a collapsible box. Despite setting it to `visibility: visible`, I can't seem to get it to display at the top of the collapsible element. Any suggestions or ideas would be g ...

Backing up User Information on Multiple Occasions

Recently, I delved into the world of Backbone JS and encountered a perplexing issue. While working on this user form using the code snippet below http://backbonetutorials.com/videos/beginner/#/new When it comes to Scenario 1 (Updating User only Once), ev ...

Check to see if the user has been redirected to the page using JavaScript

When a file input validation fails in a Laravel project, the user is redirected back to the current page. However, the issue arises when the user has to scroll down to see the error message and understand what went wrong. This doesn't provide the bes ...

Is AGM-Map capable of providing all the same features as the Google Maps API?

Greetings to everyone! I am currently working on an Angular 6 project and I want to incorporate asset tracking using the Google Maps API. However, I am unsure if AGM-Map fully supports all the features of Google Maps API, like heatmaps and advanced asset ...

jQuery fails to generate correct HTML code

I am currently working on maintaining an older Rails 3 project that I need to update with new features, particularly adding responsiveness using Bootstrap 4. The end result I am aiming for can be viewed here: http://jsfiddle.net/k1zbe4o9/. It functions pe ...

What causes the default value to disappear upon form submission?

Having implemented the jQuery validation plugin, I encountered an issue where the default value is replaced with an empty string when attempting to submit the form without changing the pre-populated value. The desired behavior is to leave the value untouch ...

Error message: webpack's CLI has been relocated to its own package named webpack-cli

I've been diving into the world of ReactJS and decided to follow a tutorial here on installing React. This is all new to me. After completing the installations as demonstrated in the video, I proceeded to run this command in the project's main f ...

Initiating iOS UIWebView when the DOM is fully loaded

One issue I'm facing is that UIWebView triggers webViewDidFinishLoad before its content is actually rendered, resulting in a short delay after the view is displayed before the content appears. I'm curious if there's a way to trigger an event ...

What is the optimal approach for managing multiple languages using React Router version 5?

I am exploring the possibility of incorporating multiple languages into my website using React and React Router v5. Can you provide guidance on the most effective approach to achieve this? Below is a snippet of the current routing code I am working with: ...

Is there a way to include $(this) as a parameter in the .getJSON callback function? Any possible solutions for

When attempting to retrieve the value of 'rel' on each list item and pass it to the .getJSON function, my goal is to then add the thumbnail_url value from the callback to the image tag of the descendant list items. One issue I encountered was fin ...

IE is having trouble with the redirect functionality

I developed a CakePHP application that requires users to log in or register (for new users) when they attempt to download a file. To redirect users to the login page, I am using JavaScript. After they login, I want them to be directed back to the download ...

Displaying all object data with Vue.js

I have a requirement to display all the data from my Object in a list format within my HTML. Here is the HTML code snippet: <template> <div id="builder"> <div class="container"> <ul> <li v-for="item in items">{{ item ...

An effective method for cutting off text while preserving HTML styling using jQuery

Is there a way to truncate text using jQuery while preserving the HTML formatting? I attempted the code below, but it doesn't maintain the HTML tags. var truncate = function() { $('p.truncated').text(function(index, oldText) { if (old ...

What is the best way to align my clip-path's text with the center of the viewport and ensure that all of the clip-path's text is visible?

Check out my React component demo: https://codesandbox.io/s/epic-brown-osiq1. I am currently utilizing the values of viewBox, getBBox, and getBoundingClientRect() to perform calculations for positioning elements. At the moment, I have hardcoded some values ...

Setting the time based on the length of an SVG shape

Currently, I am delving into the world of JavaScript and React, encountering a challenge where I am required to set time based on the length of an SVG image, similar to a progress bar. To simplify, let's consider a scenario where 24 hours equate to 1 ...

Rails API REST post request using AngularJS results in a 400 error indicating a bad request

Hey there, I'm currently working on a project involving Rails API and AngularJs, and I've encountered the following error. angular.js:11821 POST http://localhost:3000/people 400 (Bad Request) Unfortunately, I haven't been able to figure ...

next.js will display a "not-found.tsx" page if the image path is invalid

Can anyone help me with this issue I'm facing in my Next.js project? I have a page where an image from the public folder is displayed using app router. But if I go directly to the URL of the image and purposely mess up the path, Next.js shows the not- ...

The canvas doesn't seem to be rotating even after executing the setTransform

Within my HTML5 canvas, I have been experimenting with drawing lines and rotating them around the center point. My goal is to reset the canvas's transformation each time I draw, followed by re-translating/rotating the canvas. However, I have encounter ...

Use JavaScript to close a modal by simulating the pressing of the "esc" key within the

Is there a way to programmatically close all modals in Javascript without having to press the escape key manually? I tried running the following code in the browser console, but it didn't work at all. Can anyone help me resolve this issue? document.di ...