Utilizing Firestore emulator in conjunction with Nextjs

Currently, I am experimenting with the Firebase Emulator on a local project built on Nextjs. Following the instructions provided by Firebase here, I attempted to utilize

db.useEmulator('localhost', 8080);
after initializing Firebase. However, I encountered the following error:

An uncaught TypeError: db.useEmulator is not a function
  at Module.eval (VM79706 firebase.js:30)
  at eval (VM79706 firebase.js:91)
  at Module../utils/firebase.js (_app.js?ts=1603918354205:23994)
  ...

I have successfully used the emulator to test cloud functions, but I am struggling to connect it with Firestore.

This is how I configured Firebase:

import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
import 'firebase/storage';
import 'firebase/analytics';

const clientCredentials = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
  measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID
};

// Ensure `window` is available for the analytics module!
if (typeof window !== 'undefined' && !firebase.apps.length) {
  firebase.initializeApp(clientCredentials);
  if ('measurementId' in clientCredentials) firebase.analytics();

  const db = firebase.firestore();
  if (process.env.NEXT_PUBLIC_DB_HOST === 'localhost') {
   db.useEmulator('localhost', 8080);
  }
}

export default firebase;

Could anyone shed light on why this error is occurring and guide me on connecting the Firebase emulator with Nextjs?

Answer №1

After some investigation, I discovered that the issue stemmed from the introduction of this method in firebase version 8.0.0. Once I updated to the latest version, the problem was resolved!

Answer №2

Experience the power of Firebase version 9.4.1. Easily manage your database locally using the database UI. The URL for accessing the database UI is displayed when you start the emulators. Simply navigate to localhost:PORT/database to begin.

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

Encountering a 401 error message with a 'truncated server' response while using Google Apps Script

I'm currently working on a code snippet that looks like this. function method3() { var spreadsheetID = '1BGi80ZBoChrMXGOyCbu2pn0ptIL6uve2ib62gV-db_o'; var sheetName = 'Form Responses 1'; var queryColumnLetterStart = ...

Struggling to disable a checkbox for individuals with disabilities

function checkenabledisable() { if ($("#completebatch").is(':checked')) { $('.commoncheckbox').prop("checked", true); } else { $('.commoncheckbox').prop("checked", false); } $('.disabled-check').remo ...

Having trouble connecting to the Brewery API, could use some guidance from the experts (Novice)

I'm currently facing some difficulties connecting to a brewery API (). I am developing a webpage where users can input the city they are visiting and receive a list of breweries in that city. As someone unfamiliar with APIs, I am unsure about the nece ...

Is there a way to replicate a scrollable listbox with JQuery using keyboard controls?

Check out my unique JavaScript listbox implementation below: $(function() { $('#listbox1').on('keydown', function(e) { e.preventDefault(); e.stopImmediatePropagation(); var $e = $(this).find('.selected& ...

Using ajax for sending data is a breeze, but I am encountering trouble when attempting to receive data back from

I have a function that retrieves a value from an input and sends data through ajax to another PHP file. However, I am facing an issue where I cannot retrieve the result back from the PHP file even though I echo it in the ajax success function. <script&g ...

What is the best practice for handling AJAX and API calls within React.js function components?

Recently, I've been delving deeper into React.js function components and am in the process of transitioning one of my React.js applications to utilize them instead of the traditional react components. In my previous react components, I used to make AJ ...

Using Lazy Load Plugin for jQuery to enhance Backbone.js functionality

I am working on a Backbone.js application using require.js and underscore.js. I am trying to incorporate the jquery lazy loading plugin with the Eislider banner. The Eislider banner was functioning properly before implementing the lazy loading script. Th ...

Maintain only specific elements in jQuery by filtering out the rest

Here is a scenario with a page layout to consider: <div id="page-container" class=""> <div id="scroller"> <!-- This page should be removed --> <div id="page_1" class="pagina"></div> <!-- These pages should be kept --&g ...

What are the fundamentals of type conversion in struts2?

In my struts.xml file, I have the following code: <s:textfield id="thresholdParameter_1" name="gmathreshold.distinctBnumberRatio"> </s:textfield></td> The gmathreshold is a bean with a member variable distinctBnumberRatio which is a ...

Safari doesn't properly display the noOfLines property in the Chakra-UI text component

I'm facing an issue with the Chakra-UI Text component in a TypeScript Next.js app. The noOfLines property is not displaying properly in Safari, but it works fine in Chrome. Any tips on how to fix this? <Box pt={3} width={'100%'}> & ...

Pass KeyEventArgs object to JavaScript function

Is it possible to pass keydown events as parameters to a JavaScript function in Silverlight4? ...

Why isn't my ajax call working after using window.close?

Whenever I click the button on my page, a small window opens and the value from the window is sent to my controller before closing. However, I noticed that when I include the window.close() line, the controller does not get hit. It works perfectly fine wit ...

I am experiencing difficulties connecting my webRTC app to the remote system

I've set up my webRTC app on an HTTPS server and it's working fine. However, I'm facing an issue where the Remote system details (SDP) are not being captured. Both the Local system (PC1) and Remote system (PC2) are unable to establish connec ...

Is there a way to connect the horizontal scrolling of a table header with the horizontal scrolling of a table body while keeping the vertical scrolling of the table body separate from the table header?

Looking for a solution that provides a fixed header and frozen pane within a table, similar to the example at . However, I need the header to scroll horizontally with the body of the table. Here is an example based on the aforementioned link. The problem ...

What is the best way to structure JSON data when submitting a form with multiple fields using AJAX?

I am facing an issue with passing data to Ajax which requires the data to be bundled together. How can I gather the un-submitted text from my form fields and package it into a JSON object for sending to Ajax? <div id="editUserPinForm" class="ui rais ...

Guide to generating a div element with its contents using JSON

On my webpage, there is a button that increases the "counter" value every time it's clicked. I am looking to achieve the following tasks: 1) How can I generate a json file for each div on my page like the example below: <div class="text1" id="1" ...

Is there an efficient method using AJAX and jQuery to validate forms that integrates seamlessly with Django's form models?

It is particularly satisfying when forms validate "live" by alerting the user if the previous field was not valid as they move on to the next one. Which validation options do you prefer using in combination for this purpose? ...

Utilize AngularJS to enable a CSS Class through an array order

I need to activate a heartbeat CSS animation on 6 different divs, but I want to do it in a specific sequence. For instance, let's say I have an array: self.arraySequence = [0,3,5,3]; In this array, each number represents the position of the div tha ...

Incorporate a PHP-generated array into JavaScript

I'm currently working on implementing a JavaScript slideshow on my index page. Rather than having a static array, I'd like to dynamically build the array using PHP and then include it in the script. However, I'm not sure how to go about this ...

Execute the code only if the variable is not null

I encountered an issue with my code: setInterval(function() { $.ajax({ url: url, success: function(data, count){ var obj = jQuery.parseJSON(data); var content = obj.results[0].content; }}) }, 2000) The code runs every 2 seconds an ...