Using Next.js with Firebase emulators

I've been struggling to configure Firebase's V9 emulators with Next.js, but I keep running into the same error message. See it here: https://i.stack.imgur.com/Uhq0A.png

The current version of Firebase I'm using is 9.1.1.

This is how my Firebase setup looks:

import { initializeApp, FirebaseApp } from "firebase/app";
import firebase from "firebase/compat/app";
import { getAuth, connectAuthEmulator, Auth } from "firebase/auth";
import {
  getFirestore,
  connectFirestoreEmulator,
  Firestore,
} from "firebase/firestore";
import {
  getStorage,
  connectStorageEmulator,
  FirebaseStorage,
} from "firebase/storage";
import {
  getDatabase,
  connectDatabaseEmulator,
  Database,
} from "firebase/database";

let firebaseApp: FirebaseApp;
let auth: Auth;
let firestore: Firestore;
let storage: FirebaseStorage;
let db: Database;

if (!firebase.apps.length) {
  firebaseApp = initializeApp(clientCredentials);
  auth = getAuth(firebaseApp);
  firestore = getFirestore(firebaseApp);
  storage = getStorage(firebaseApp);
  db = getDatabase(firebaseApp);
}

if (IS_DEV) {
  connectFirestoreEmulator(firestore, "localhost", 8080);
  connectAuthEmulator(auth, "http://localhost:9099", { disableWarnings: true });
  connectDatabaseEmulator(db, "localhost", 9000);
  connectStorageEmulator(storage, "localhost", 9199);
}

export { firebaseApp, auth, firestore, storage, db }

I have ensured that there are no calls to my firestore object, yet the error persists as soon as Next.js boots up.

javascriptfirebasegoogle-cloud-firestorenext.js

Answer №1

This issue arises due to conflicts with global namespace values and the NextJs runtime.

To resolve this problem, you can implement the following solution:

const EMULATORS_STARTED = 'EMULATORS_STARTED';
function startEmulators() {
  if (!global[EMULATORS_STARTED]) {
    global[EMULATORS_STARTED] = true;
    connectFunctionsEmulator(functions, 'localhost', 5001);
    connectFirestoreEmulator(db, 'localhost', 8080);
    connectAuthEmulator(auth, "http://localhost:9099", { disableWarnings: true });
    connectDatabaseEmulator(db, "localhost", 9000);
    connectStorageEmulator(storage, 'localhost', 9199);
  }
}

After Firebase initializes 'EMULATORS_STARTED' in the global namespace, NextJs may run that code multiple times. By using this script, you can ensure that attempts to connect to the emulators are made only once.

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

The Node.js application is unable to execute due to the error: "View "error" could not be found in the views directory."

Currently, I am following a tutorial that covers the integration of social login with Passport and Node. You can find the tutorial here: Tutorial Link In line with the tutorial, I have started working on a project while utilizing Windows 10 operating syst ...

javascriptnode.jsangularpassport.js

AngularJS modal behaving oddly when checkboxes are used

My Angular app is available in this plunker. Upon clicking the button, a modal dialog opens displaying a list of items. Two of these items are pre-checked based on conditions set in the checkbox table input. The following function handles pushing and spl ...

javascriptangularjs

Implement responsive data tables by setting a specific class for hiding columns

Having trouble assigning a specific class name to individual columns in datatables? It seems that when columns are hidden using the responsive extension, the desired class is not applied. Looking for a solution or workaround. Check out this example from D ...

javascriptjqueryhtmlcssdatatables

The most efficient and hygienic method for retrieving a value based on an observable

Looking at the structure of my code, I see that there are numerous Observables and ReplaySubjects. When trying to extract a value from one of these observables in the HTML template, what would be the most effective approach? In certain situations, parame ...

javascriptangulartypescript

Using ReactJS to capture keydown events from an iframe

I am trying to implement keydown event handling for an iframe within a ReactJS component. The iframe contains an embedded video, and I want to be able to capture keyboard events while the video is playing. Can someone please assist me with how to achieve ...

javascripthtmlreactjsiframekeydown

Navigating through an array and Directing the Path

My array contains objects as shown below: const studentDetails = [ {id:1, name:"Mike", stream:"Science", status:"active"}, {id:2, name:"Kelly", stream:"Commerce", status:"inactive"}, { ...

javascriptreactjsnext.js

What is the best approach to animating a specified quantity of divs with CSS and javascript?

How neat is this code snippet: <div class="container"> <div class="box fade-in one"> look at me fade in </div> <div class="box fade-in two"> Oh hi! i can fade too! </div> <div class="box fade-in three"& ...

javascriptcss

Efficiently select multiple classes in Material UI with just one target

I'm currently working with Material UI and I want to update the color of my icon class when the active class is triggered by react-router-dom's NavLink Here is my code: import React from "react"; import { makeStyles } from "@mater ...

javascriptreactjsmaterial-ui

When integrating Ably with a Next.js app router on Vercel, users may encounter errors 40104 and 40105

My current setup involves using ably and I have set up a route to generate a token on my next.js server. The code below is based on the example provided on ably's website: // src/app/api/getAblyToken/route.ts import { NextResponse } from "next/s ...

next.jsvercelapp-routerably-realtime

Setting the height of columns in a Bootstrap panel to 100%

Is there a way to achieve 100% height for all three columns even without content? Check out this JSFiddle: <div class="row"> <div class="col-md-12"> <div class="shadow panel panel-default"> <div class="blue white-bord ...

javascriptcssangularjstwitter-bootstrap

Guidance on redirecting and displaying the URL retrieved from an API response object in the browser using express and axios

Currently in the process of developing a payment gateway using the Paystack API along with Axios for managing HTTP requests. After thoroughly examining their API documentation and reviewing their Postman collection, I was able to grasp how to structure th ...

javascriptnode.jsexpressaxios

Error: OpenAI's transcription API has encountered a bad request issue

const FormData = require('form-data'); const data = new FormData(); console.log('buffer: ', buffer); console.log('typeof buffer: ', typeof buffer); const filename = new Date().getTime().toString() + '.w ...

javascriptnode.jsaxiosopenai-apiopenai-whisper

Subcomponent in React is not rendering as expected

I have a primary React component with a subcomponent named AttributeInput. To prevent redundancy in my code, I moved some of the logic from the main component to a method within AttributeInput. My attempt at referencing this code looks like this: {this.s ...

javascriptreactjs

Issue with React and JavaScript: Object is displayed on the console briefly before disappearing

I am having an issue with my sign up page where the console log of the two fields disappears after a second. I would appreciate any assistance on this matter. Below is the code for the sign-up form: export default function SignUp() { const [firstNam ...

javascriptreactjsmaterial-ui

A Guide to Retrieving HTML Content Using jQuery's Ajax Method

I am working on a page that contains Option elements with Values linking to external pages. My goal is to utilize Ajax to retrieve the selected Option's Value and use it to load content from those external pages. For example, if a user selects Volleyb ...

javascriptjqueryajax

Using Angular to automatically update the user interface by reflecting changes made in the child component back to the parent component

Within Angular 5, I am utilizing an *IF-else statement to determine if the authorization value is true. If it is true, then template 2 should be rendered; if false, then template 1 should be rendered. Below is the code snippet: <div *ngIf="authorized; ...

javascriptasp.netangulartypescriptasp.net-core

Unable to start store from localStorage during App initialization

Having trouble setting up my Vuex store with the logged-in user's account details from localStorage. I've looked at numerous Auth examples in Nuxt, but none explain how to retrieve an authToken from localStorage on the client side for subsequent ...

javascriptvue.jsvuex

"Commitment made ahead of time without allowing for the outcome to

I'm completely new to working with promises and I'm encountering some unexpected behavior in my code. The issue lies in the TaskRunner.SyncObjects function within Main.js, which should be waiting for the selectedCourses variable to be populated ...

javascriptnode.jspromiseelectronbluebird

Tips for optimizing search functionality in Angular to prevent loading all data at once

An exploration for information within vast datasets is triggered by AngularJS when the input contains more than 3 characters. var app = angular.module('test_table', []); app.controller('main_control',function($scope, $http){ $scope ...

javascripthtmlangularjs

What is the best way to address Peer dependency alerts within npm?

Here is a sample package.json that I am using for my application: dependencies : { P1 : “^1.0.0” // with peer dependency of p3 v1 P2 : “^1.0.0” // with peer dependency of p3 v2 } P1 and P2 both have peer dependencies on ...

javascriptreactjsnpmdependencies